H5canvas 2：路径，画七巧板

最新推荐文章于 2021-07-27 11:51:54 发布

beiluo77

最新推荐文章于 2021-07-27 11:51:54 发布

阅读量506

点赞数

分类专栏： web前端文章标签： H5 canvas

本文链接：https://blog.csdn.net/beiluo77/article/details/88353609

版权

本文介绍如何使用H5canvas通过路径绘制七巧板，展示了利用beginPath(), fillStyle(), closePath()和fill()等方法创建简单图形的技巧，为制作更多创意动画提供基础。" 97028052,7528565,C++与C语言中动态内存分配：malloc与new的对比,"['C语言', 'C++', '内存管理', '动态内存', 'new运算符', 'malloc函数']

摘要由CSDN通过智能技术生成

H5canvas 2：路径，画七巧板

我们小时候应该都玩过七巧板，小小几块板可以拼出很多的图形，我挑了个简单的图形拼凑了一只小船：
在这里插入图片描述
写起来格外简单，代码都是相同的，只是改了几个坐标，主要使用了
beginPath()，
fillStyle()，
closePath()
fill()
这几个方法
以下是js代码（html 和css代码都是一样的，可参考我之前的文章，或者直接写 <canvas></canvas> 就可以了）

window.function(){
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");
	//船帆
	ctx.beginPath();
	ctx.fillStyle="coral";
	ctx.moveTo(250,100);
	ctx.lineTo(250,300);
	ctx.lineTo(350,200);
	ctx.closePath();
	ctx.fill();
	
	ctx.beginPath();
	ctx.fillStyle="cornflowerblue";
	ctx.moveTo(250,300);
	ctx.lineTo(450,300);
	ctx