由于网上很多都是用很多算法和逻辑使用canvas进行绘制，但有时也无法解决一些小众需求
。
为了满足需求不能写运算纯手写，感觉真的很浪费时间，只有自己踩过的坑，才不想看到别人也被坑。我很懒，也想过弄个工具，目前先放代码吧，方便需要的人copy。
<canvas> H5标签，只是图形容器，您必须使用脚本来绘制图形。
lineTo() 方法 添加一个新点，然后创建从该点到画布中最后指定点的线条
bezierCurveTo() 方法 通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点
提示：三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束 点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 和 方 法来定义开始点。
说明：网上有高级算法的绘制，很灵活也很方便，如果不是特使情况，千万别用我的方法，请上网右转看别人的案例，哈哈。
☆ 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>
个人公众号(ZEROFC_DEV)，关于web开发的，欢迎关注O(∩_∩)O~
如对本文有疑问， 点击进行留言回复！！
web前端基础之HTML5语义化新标签学习笔记（8）学会用语义化标签
我要评论
网友评论