这篇文章给大家分享的是有关html5画布中如何绘制爱心的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
第一种方法
使用桃心形方程绘制爱心& lt;/title>
& lt;/head>
& lt; body>
,,,& lt; canvas> & lt;/canvas>
,,,& lt; script>
,,,,,,,var canvas =, document.querySelector(& # 39;帆布# 39;);
,,,,,,,var ctx =, canvas.getContext (& # 39; 2 d # 39;);
,,,,,,,canvas.width =, window.innerWidth;
,,,,,,,canvas.height =, window.innerHeight;
,,,,,,,var Heart =,函数(x, y), {
,,,,,,,,,,,this.x =, x;
,,,,,,,,,,,this.y =, y;
,,,,,,,,,,,this.vertices =, [];
,,,,,,,,,,,,(let i=0, i<30;,我+ +),{
,,,,,,,,,,,,,,,var step =,小姐:/,30,*,(* Math.PI 2);//设置心上面两点之间的角度,具体分成多少份,好像需要去试。
,,,,,,,,,,,,,,,var vector =, {
,,,,,,,,,,,,,,,,,,,x :, (15, *, Math.pow (sin(步骤),3)),
,,,,,,,,,,,,,,,,,,,y :, - (13, *, Math.cos(步骤),安康;5,*,Math.cos(2, *,步骤),安康;2,*,Math.cos(3, *,步骤),安康;Math.cos(4, *,步骤)
,,,,,,,,,,,,,,,}
,,,,,,,,,,,,,,,this.vertices.push(向量);
,,,,,,,,,,,}
,,,,,,,}
,,,,,,,Heart.prototype.draw =,()函数,{
,,,,,,,,,,,ctx.translate(-1000年,this.y);//这一步跟ctx.shadowOffsetX必须一起使用,不明白为啥?
,,,,,,,,,,,ctx.beginPath ();
,,,,,,,,,,,,(let i=0, i<30;,我+ +),{
,,,,,,,,,,,,,,,var vector =, this.vertices[我];
,,,,,,,,,,,,,,,ctx.lineTo (vector.y vector.x也);
,,,,,,,,,,,}
,,,,,,,,,,,ctx.shadowColor =,“red";
,,,,,,,,,,,ctx.shadowOffsetX =, this.x + 1000;
,,,,,,,,,,,ctx.fill ();
,,,,,,,}
,,,,,,,canvas.onmousedown =,函数(e), {
,,,,,,,,,,,var x =, e.offsetX;
,,,,,,,,,,,var y =, e.offsetY;
,,,,,,,,,,,var heart =, new 心(x, y);
,,,,,,,,,,,heart.draw ();
,,,,,,,}
,,,& lt;/script>
& lt;/body>
& lt;/html>
感谢各位的阅读!关于“html5画布中如何绘制爱心”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
