元素

·标签是HTML5新增的一个双标签

·兼容问题：IE9以下及低版本浏览器不支持

·处理方式：在双标签内部添加提示语。

Canvas的基本用法 - 图1

标签属性

width: 画布的宽度

height：画布的高度

id：标签的id属性，用于JS获取元素

·注意：width、height属性虽然可以设置在CSS中，但是会出现变形和扭曲的现象，所以

如果想固定画布的宽高，直接设置在标签属性中。

JavaScript渲染上下文

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

JavaScript绘制步骤

·通过id属性获取canvas元素

·通过canvas元素的getContext方法获取上下文context，图像将在上下文进行染，类

似PS中的新建一个画布

·CanvasAPI主要聚焦于2D图形，所以获取2d上下文

·后期的绘制工作都是在ctx上下文进行的

<!DOCTYPEhtml> <htmllang=“en”> <head> <metacharset=“UTF-8”> <metahttp-equiv=“X-UA-Compatible”content=“IE=edge”> <metaname=“viewport”content=“width=device-width, initial-scale=1.0”> <title>Document</title> <style> * { margin: 0; padding: 0; } canvas { border: 1pxsolidred; } </style> </head> <body> <canvaswidth=“800”height=“600”id=“myCanvas”> 对不起，您的浏览器版本过低，请升级浏览器！ </canvas> <script> // 获取元素 varmyCanvas = document.getElementById(“myCanvas”); // 需要新建一个类似PS中的画布，获取 canvas 的渲染上下文获得 varctx = myCanvas.getContext(“2d”); // 后续所有的操作都是在上下文进行 ctx.fillStyle = “red”; ctx.fillRect(100, 100, 200, 200); </script> </body> </html>