HTML5中怎么使用Canvas動態繪制心型線和玫瑰線

本篇內容主要講解“HTML5中怎么使用Canvas動態繪制心型線和玫瑰線”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“HTML5中怎么使用Canvas動態繪制心型線和玫瑰線”吧!

　　1.心型線和玫瑰線

　　繪制這兩種曲線，首先我們分別選用兩個參數方程(心型線和玫瑰線的參數方程不同，其形態特征也不一樣，你可以根據你的需要選擇合適的參數方程)

　　桃心型線的參數方程：

　　x = 16 (sinθ)^3

　　y = 13 cosθ- 5 cos 2θ - 2 cos 3θ - cos 4θ

　　玫瑰線的參數方程：

　　x=sin4θ×cosθ

　　y=sin4θ×sinθ

　　2.繪制

　　假設我們在html頁面中有一個Canvas元素，其Id為drawing。(注意利用CSS樣式設置的Canvas的高度和寬度只是元素顯示的高度和寬度，并不是畫布的高度和寬度，后者是不帶單位的，這點尤為重要。初次使用時，我用Css設置了寬度為300px，高度為300px的canvas元素，想畫一個正方形，最終顯示結果卻是一個矩形，原來畫布默認大小為300×150并沒有被改變，他使我的繪制的圖形發生了縮放。

　　接著我們通過Id選取該Canvas元素，在繪圖之前需要使用getContext()方法取得繪圖上下文。接著就根據參數方程開始繪制路徑了，主要使用lineTo()方法繪制。代碼如下：

　　function draw(){

　　var drawing = document.getElementById("drawing"); //獲取canvas元素

　　drawing.width = '500'; //設置畫布大小

　　drawing.height = '500';

　　if (drawing.getContext){ //獲取繪圖上下文

　　var content = drawing.getContext("2d"),

　　radian = 0, //設置初始弧度

　　radian_add = Math.PI/180; //設置弧度增量

　　content.beginPath(); //開始繪圖

　　content.translate(250,250); //設置繪圖原點

　　content.moveTo(getX(radian),getY(radian)); //移動繪圖游標至原點

　　while(radian <= (Math.PI*2)){ //每增加一次弧度，繪制一條線

　　radian += radian_add;

　　X = getX(radian);

　　Y = getY(radian);

　　content.lineTo(X,Y);

　　}

　　content.strokeStyle = "red"; //設置描邊樣式

　　content.stroke(); //對路徑描邊

　　}

　　}

　　function getX(t){ //獲取玫瑰線的X坐標

　　return 100 * Math.sin(4*t)*Math.cos(t);

　　}

　　function getY(t){ //獲取玫瑰線的Y坐標

　　return 100 * Math.sin(4*t)*Math.sin(t);

　　}

　　function getX1(t){ //獲取心型線的X坐標

　　return 15*(16*Math.pow(Math.sin(t),3))

　　}

　　function getY1(t){ //獲取心型線的Y坐標

　　return -15*(13*Math.cos(t)-5*Math.cos(2*t)-2*Math.cos(3*t)-Math.cos(4*t))

　　}

　　效果如下：

　　3.動態繪制線條以及用圖片描邊

　　我們可以結合drawImage()和setInterval()方法，用圖片(例如一朵小花)來動態繪制曲線，只需修改部分代碼，以心型線舉例：

　　修改的draw()代碼如下：

　　function draw(){

　　var drawing = document.getElementById("drawing"),

　　pic = document.getElementById('flower'); //獲取描邊圖片

　　drawing.width = '500';

　　drawing.height = '500';

　　if (drawing.getContext){

　　var content = drawing.getContext("2d"),

　　radian = 0,

　　radian_add = Math.PI/40;

　　content.translate(250,250);

　　function heart(){

　　X = getX1(radian);

　　Y = getY1(radian);

　　content.drawImage(pic,X,Y,25,25); //在給定坐標繪制給定大小的圖片

　　radian+=radian_add;

　　if (radian > (2*Math.PI)){ //繪制完整的心型線后取消間歇調用

　　clearInterval(intervalId);

　　}

　　}

　　intervalId = setInterval(heart,100); //設置間歇調用，間隔為100ms

　　}

　　}

到此，相信大家對“HTML5中怎么使用Canvas動態繪制心型線和玫瑰線”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！