canvas纯绘制雨伞飞机五角星桃心，无逻辑可复制
Posted ZERO开发
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas纯绘制雨伞飞机五角星桃心，无逻辑可复制相关的知识，希望对你有一定的参考价值。
不是特殊情况，真的不要这样做，别学我，真的，相信我，没骗你！
-参考----------------------------------------------------------
为了满足特殊需求(巨坑)不能写运算纯手写，感觉真的很浪费时间(我并不做这个的)，只有自己踩过的坑，才不想看到别人也被坑。我很懒(剪短发不洗头)，也想过弄个工具，目前先放代码吧，方便需要的人copy !下面先简单介绍配料再上菜吧。
/////////////////////////////////////////////////////////食材///////////////////////////////////////////////////////////
<canvas> H5标签，只是图形容器，您必须使用脚本来绘制图形。
lineTo() 方法 添加一个新点，然后创建从该点到画布中最后指定点的线条
bezierCurveTo() 方法 通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点
提示：三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束 点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方 法来定义开始点。
/////////////////////////////////////////////////////////食材///////////////////////////////////////////////////////////
--------------------------------------------我是分割线---------------------------------------------
说明：网上有高级算法的绘制，很灵活也很方便，如果不是特使情况，千万别用我的方法，请上网右转看别人的案例，哈哈。
----------------------------------------看不到我，看不到---------------------------------------
☆ canvas画布节点(仅供参考)
<canvas id="myCanvas" width="264" height="264" style="border:red 1px solid;position:absolute;top:0;left:0"></canvas>
1. 雨伞
<script type="text/javascript">
function draw(id) {
var canvas=document.getElementById(id);
if(canvas==null)
return false;
var ctx=canvas.getContext('2d');
ctx.beginPath();
// 小雨点
ctx.moveTo(47,32);
ctx.bezierCurveTo(40,42,38,56,46,60);
ctx.bezierCurveTo(64,52,50,40,47,32);
// 大雨点
ctx.moveTo(78,32);
ctx.bezierCurveTo(70,44,62,66,78,70);
ctx.bezierCurveTo(104,60,80,40,78,32);
// 伞身
ctx.moveTo(44,118);
ctx.bezierCurveTo(48,114,50,90,72,76);
ctx.bezierCurveTo(82,82,104,70,102,54);
ctx.bezierCurveTo(138,26,222,76,224,118);
ctx.lineTo(146,118);
ctx.lineTo(146,200);
ctx.bezierCurveTo(147,212,162,216,162,192);
ctx.bezierCurveTo(168,188,172,186,178,192);
ctx.bezierCurveTo(180,200,182,218,162,231);
ctx.bezierCurveTo(154,240,116,226,122,200);
ctx.lineTo(122,118);
ctx.lineTo(44,118);
var gradient=ctx.createRadialGradient(0,0,0,0,0,150);
gradient.addColorStop(0,"rgba(244,28,285,0.1)");
gradient.addColorStop(1,"rgba(255,255,255,1)");
ctx.strokeStyle = "red"; //设置或返回用于笔触的颜色、渐变
ctx.stroke();
ctx.fillStyle=gradient;
ctx.fill();
}
</script>
2. 飞机
<script type="text/javascript">
function draw(id) {
var canvas=document.getElementById(id);
if(canvas==null)
return false;
var ctx=canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(65,50);
ctx.lineTo(156,70);
ctx.lineTo(190,38);
ctx.bezierCurveTo(222,10,250,40,230,70);
ctx.lineTo(195,106);
ctx.lineTo(218,204);
ctx.lineTo(186,228);
ctx.lineTo(150,146);
ctx.lineTo(110,186);
ctx.bezierCurveTo(118,200,126,220,98,234);
ctx.lineTo(30,162);
ctx.bezierCurveTo(30,134,70,140,78,152);
ctx.lineTo(118,114);
ctx.lineTo(40,78);
ctx.lineTo(65,50);
/*ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,22,62.5,22,55);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,128,55);
ctx.bezierCurveTo(128,55,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);*/
var gradient=ctx.createRadialGradient(0,0,0,0,0,150);
gradient.addColorStop(0,"rgba(244,28,285,0.1)");
gradient.addColorStop(1,"rgba(255,255,255,1)");
ctx.strokeStyle = "red"; //设置或返回用于笔触的颜色、渐变
ctx.stroke();
ctx.fillStyle=gradient;
ctx.fill();
}
</script>
3. 五角星
<script>
function init() {
var canvas = document.getElementById('stars');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "#827839";
//ctx.shadowColor = "#000000";
ctx.shadowOffsetX = 1;
ctx.shadowOffsetY = 12;
ctx.shadowBlur = 18;
// 开始一条新路径
ctx.beginPath();
/*ctx.moveTo(15,150) +30 -8
ctx.lineTo(100,140); // 2
ctx.lineTo(170,80); // 3
ctx.lineTo(230,140); // 4
ctx.lineTo(315,150); // 5
ctx.lineTo(230,200); // 6
ctx.lineTo(300,263); // 7
ctx.lineTo(170,220); // 8
ctx.lineTo(30,263); // 9
ctx.lineTo(100,200); // 10
//ctx.lineTo(15,150); // 结束
ctx.closePath();
ctx.fill();*/
ctx.moveTo(45,142); // 起点
ctx.lineTo(129,126); // 2
ctx.lineTo(172,40); // 3
ctx.lineTo(215,126); // 4
ctx.lineTo(299,142); // 5
ctx.lineTo(240,203); // 6
ctx.lineTo(252,288); // 7
ctx.lineTo(172,252); // 8
ctx.lineTo(92,288); // 9
ctx.lineTo(105,203); // 10
//ctx.lineTo(15,150); // 结束
ctx.closePath();
ctx.fill();
}
window.addEventListener("load",init.false);
</script>
4. 桃心
<script type="text/javascript">
function draw(id) {
var canvas=document.getElementById(id);
if(canvas==null)
return false;
var ctx=canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,22,62.5,22,55);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,128,55);
ctx.bezierCurveTo(128,55,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);
var gradient=ctx.createRadialGradient(0,0,0,0,0,150);
gradient.addColorStop(0,"rgba(244,28,285,0.5)");
gradient.addColorStop(1,"rgba(255,255,255,1)");
ctx.fillStyle=gradient;
ctx.fill();
}
</script>
有需要就直接复制，别想太多，我不介意的，因为我很大度，没版权同时也是很蠢的写法，哈哈。
以上是关于canvas纯绘制雨伞飞机五角星桃心，无逻辑可复制的主要内容，如果未能解决你的问题，请参考以下文章