H5初识，应用canvas实现一个简单的七巧板图形

最新推荐文章于 2022-03-24 10:48:35 发布

不想差一点的前端菜鸟

最新推荐文章于 2022-03-24 10:48:35 发布

阅读量539

点赞数

本文链接：https://blog.csdn.net/qq_43339643/article/details/90203427

版权

这篇博客简单记录了使用HTML5的canvas元素绘制七巧板的过程，主要强调了通过预计算各点坐标以及利用beginPath()和closePath()确保图形闭合。博主提醒，canvas的尺寸应在标签内设置而非样式表中。

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

简单的记录一下学习过程

应用html5的canvas绘制了一个十分简单的七巧板图形，没有什么难度，只要将各个点的坐标预先计算好

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
    
				var canvas=document.getElementById('my-canvas')
				var ctx=canvas.getContext('2d')
				
				//橙色区域 顶点 逆时针
				ctx.beginPath()
				ctx.moveTo(50,50)
				ctx.lineTo(50,650)
				ctx.lineTo(350,350)
				ctx.strokeStyle='#e67817'//橙色区域
				ctx.fillStyle='#e67817'
				ctx.fi