手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

如何使用HTML5中的canvas绘制等腰直角三角形

时间:2024-10-12 18:51:42

1、第一步,双击打开HBuilder编辑工具,新建静态页面tri.html,并引入jQuery核心文件,如下图所示:

如何使用HTML5中的canvas绘制等腰直角三角形

2、第二步,在<body></body>插入div标签,并在div标签粝简肯惧内插入canvas,设置canvas属性ID,利用ID选择器设置宽度和高度,如下图所示:

如何使用HTML5中的canvas绘制等腰直角三角形

3、第三步,定义绘制三角形的函数drawTri,然后在jQuery初始化函数内调用这个函数,如下图所示:

如何使用HTML5中的canvas绘制等腰直角三角形

4、第四步, 保存代码并预览该静态页面,打开浏览器的控制台,发现出现了报错,如下图所示:

如何使用HTML5中的canvas绘制等腰直角三角形

5、第五步,由错误提示可知,是由于调用getContext方法需要传入一个参数,修改代码并预览,如下图所示:

如何使用HTML5中的canvas绘制等腰直角三角形
如何使用HTML5中的canvas绘制等腰直角三角形

6、第六步,修改canvas中的fillStyle方法属性,再次预览静态页面,发现三角形样式发生了改变,如下图所示:

如何使用HTML5中的canvas绘制等腰直角三角形
© 手抄报圈