h5 canvas学习笔记_var canvaselement = document.getelementbyid("canva-CSDN博客

本文链接：https://blog.csdn.net/zhangwx6/article/details/58671045

这篇博客详细介绍了如何使用HTML5的Canvas元素进行画布操作，包括创建画布、获取画笔、画图步骤、样式设置及接口的使用，并通过一个模拟时钟的实例展示了Canvas的实践应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建画布：

    <canvas id="myCanvas" width="600px" height="530px">
        你的浏览器不支持canvas
    </canvas>

以上代码为在html文件里面添加一个canvas标签（若浏览器不支持此属性则会显示“你的浏览器不支持canvas”），除了width和height属性外，其还支持h5的标准属性，但是，canvas不是块级元素，在设置其居中的时候，要么外层包一个div，要么设置body的text-align为center。

获取画笔：

    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

其中canvas是画布元素，ctx可以简单的理解为画笔。canvas本身是一块画布，没有画图能力，需要使用js来画图。

画图步骤：

保存当前的画图状态（save()函数）
设置画笔属性
勾勒或者填充
切换回保存的画图状态（restore()）

其中，第一步和第四步是需要配对使用的，它的意思是在画一个新的组件之前，将此时的画笔设置状态保存，在组件画完之后，恢复画笔状态，去除重复设置的

繁琐以及减少代码量和冗余。

样式设置：

ctx.fillStyle // 填充的颜色样式，值为十六进制表示或者其他的颜色表达式
ctx.strokeStyle // 勾勒的颜色样式，值同上
ctx.globalAlpha // 透明度样式，值为数字
ctx.lineWidth // 线条的宽度，单位是像素
ctx.lneCap // 线条的端点样式，值为butt/round/square，分别对应无端点、圆形端点、正方形端点
ctx.lineJoin /