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

我們提供的服務(wù)有：成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、新區(qū)ssl等。為成百上千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的新區(qū)網(wǎng)站制作公司

1.心型線和玫瑰線

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

桃心型線的參數(shù)方程：

x = 16 (sinθ)^3

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

玫瑰線的參數(shù)方程：

x=sin4θ×cosθ

y=sin4θ×sinθ

2.繪制

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

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

function draw(){

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

drawing.width = '500'; //設(shè)置畫布大小

drawing.height = '500';

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

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

radian = 0, //設(shè)置初始弧度

radian_add = Math.PI/180; //設(shè)置弧度增量

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

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

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

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

radian += radian_add;

X = getX(radian);

Y = getY(radian);

content.lineTo(X,Y);

}

content.strokeStyle = "red"; //設(shè)置描邊樣式

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

}

}

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

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

}

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

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

}

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

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

}

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

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

}

效果如下：

3.動態(tài)繪制線條以及用圖片描邊

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

修改的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); //在給定坐標(biāo)繪制給定大小的圖片

radian+=radian_add;

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

clearInterval(intervalId);

}

}

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

}

}

到此，相信大家對“HTML5中怎么使用Canvas動態(tài)繪制心型線和玫瑰線”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！