canvas繪制愛心的幾種方法總結(jié)(推薦)
更新時(shí)間：2017年10月31日 09:00:32 作者：暮雪&&如霜
下面小編就為大家?guī)硪黄猚anvas繪制愛心的幾種方法總結(jié)(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
第一種方法
代碼實(shí)現(xiàn)的一種方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用桃心形方程繪制愛心</title>
</head>
<body>
<canvas></canvas>
<script>
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var Heart = function(x, y) {
this.x = x;
this.y = y;
this.vertices = [];
for(let i=0; i<30; i++) {
var step = i / 30 * (Math.PI * 2);//設(shè)置心上面兩點(diǎn)之間的角度，具體分成多少份，好像需要去試。
var vector = {
x : (15 * Math.pow(Math.sin(step), 3)),
y : -(13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step))
}
this.vertices.push(vector);
}
}
Heart.prototype.draw = function() {
ctx.translate(-1000,this.y);//這一步跟ctx.shadowOffsetX必須一起使用，不明白為啥？
ctx.beginPath();
for(let i=0; i<30; i++) {
var vector = this.vertices[i];
ctx.lineTo(vector.x, vector.y);
}
ctx.shadowColor = "red";
ctx.shadowOffsetX = this.x+1000;
ctx.fill();
}
canvas.onmousedown = function(e) {
var x = e.offsetX;
var y = e.offsetY;
var heart = new Heart(x, y);
heart.draw();
}
</script>
</body>
</html>
代碼里面有兩處地方不明白 ctx.translate(-1000,this.y); 跟 ctx.shadowOffsetX = this.x+1000; 能感覺出來什么意思，但是不知道為啥要加上，去掉就不行了。請路過的各位大佬們幫忙解答一下~~
以上這篇canvas繪制愛心的幾種方法總結(jié)(推薦)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要為大家介紹了移動端touch拖動和click事件沖突問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
前臺頁面五分鐘，自己刷新一次，所以最多只有五分鐘的差錯(cuò)。2008-10-10
JavaScript新功能介紹之findLast()和findLastIndex()
最近工作中遇到了一個(gè)關(guān)于查找數(shù)組里面的目標(biāo)元素的方法,所以下面這篇文章主要給大家介紹了關(guān)于JavaScript新功能之findLast()?和findLastIndex()的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
微信開發(fā)之企業(yè)付款到銀行卡接口開發(fā)的示例代碼
這篇文章主要介紹了微信開發(fā)之企業(yè)付款到銀行卡接口開發(fā)的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
基于Bootstrap 3 JQuery及RegExp的表單驗(yàn)證功能
這篇文章主要介紹了基于Bootstrap 3 JQuery及RegExp的表單驗(yàn)證功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
JavaScript中的console.time()函數(shù)詳細(xì)介紹
這篇文章主要介紹了JavaScript中的console.time()函數(shù)詳細(xì)介紹,console.time()函數(shù)主要用來統(tǒng)計(jì)程序執(zhí)行時(shí)間,需要的朋友可以參考下2014-12-12
JavaScript深度復(fù)制（deep clone）的實(shí)現(xiàn)方法
本文給大家介紹JavaScript深度復(fù)制（deep clone）的實(shí)現(xiàn)方法，涉及到j(luò)s深度復(fù)制相關(guān)知識，本文介紹的非常詳細(xì)，特此分享腳本之家平臺供大家參考2016-02-02
使用 JavaScript 進(jìn)行函數(shù)式編程 (一) 翻譯
本文是函數(shù)式編程系列的第一篇文章。這里我會簡要介紹一下編程范式，然后會直接介紹使用 Javascript 進(jìn)行函數(shù)式編程的概念，因?yàn)?JavsScript 是最被認(rèn)可的函數(shù)式程序語言之一。我們鼓勵(lì)讀者通過參考資料部分進(jìn)一步了解這一迷人的概念2015-10-10
地圖服務(wù)是指可以提供數(shù)據(jù)信息的接口，比如說本地搜索/路線規(guī)劃等，下面介紹下百度地圖API之本地搜索與范圍搜索的相關(guān)知識，有需要的小伙伴可以來學(xué)習(xí)下2015-07-07
這篇文章主要介紹了論JavaScript模塊化編程，感興趣的小伙伴們可以參考一下2016-03-03