canvas及HTML5代码规范

最新推荐文章于 2023-02-14 14:33:44 发布

亐㔓832

最新推荐文章于 2023-02-14 14:33:44 发布

阅读量195

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/weixin_55685975/article/details/115662908

版权

本文详细介绍了HTML5 canvas元素的使用，包括如何绘制路径、矩形、圆形和文本，以及渐变的应用。此外，还分享了HTML5编码规范，包括正确使用文档类型、元素名、属性名和值，以及注释和样式的编写规范，以提高代码的可读性和维护性。

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

canvas

HTML5<canvas>元素用于图形的绘制，通过脚本（通常是JavaScript）来完成。

<canvas>标签只是图形容器，必须使用脚本来绘制图形。

可以通过多种方法使用canvas绘制路径，盒、圆、字符以及添加图像。

一个画布在网页中是一个矩形框，通过<canvas>元素来绘制。

注意：默认情况下<canvas>元素没有边框和内容。

<canvas id="canvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

canvas元素本身是没有绘图能力的。所有的绘制工作必须在JavaScript内部完成

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000"；
ctx.fillRect(0,0,150,75);

canvas是一个二维网格。

canvas的左上角坐标为（0,0）

上面的fillRect方法拥有参数（0,0,150,75）。

意思是：在画布上绘制150*75的矩形，从左上角开始（0,0）

关注