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

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

1.心型線和玫瑰線

繪制這兩種曲線，首先我們分別選用兩個(gè)參數(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è)我們?cè)趆tml頁面中有一個(gè)Canvas元素，其Id為drawing。(注意利用CSS樣式設(shè)置的Canvas的高度和寬度只是元素顯示的高度和寬度，并不是畫布的高度和寬度，后者是不帶單位的，這點(diǎn)尤為重要。初次使用時(shí)，我用Css設(shè)置了寬度為300px，高度為300px的canvas元素，想畫一個(gè)正方形，最終顯示結(jié)果卻是一個(gè)矩形，原來畫布默認(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è)置繪圖原點(diǎn)

content.moveTo(getX(radian),getY(radian)); //移動(dòng)繪圖游標(biāo)至原點(diǎn)

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

radian += radian_add;

X = getX(radian);

Y = getY(radian);

content.lineTo(X,Y);

}

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

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

}

}

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.動(dòng)態(tài)繪制線條以及用圖片描邊

我們可以結(jié)合drawImage()和setInterval()方法，用圖片(例如一朵小花)來動(dòng)態(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

}

}

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

分享題目：HTML5中怎么使用Canvas動(dòng)態(tài)繪制心型線和玫瑰線
本文網(wǎng)址：http://www.chinadenli.net/article48/iiidep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、Google、定制網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、移動(dòng)網(wǎng)站建設(shè)、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)