1、创建一个canvas标签
<canvas id="test-canvas" width="300" height="200"></canvas>
由于浏览器对HTML5标准支持不一致,所以,通常在<canvas>
内部添加一些说明性HTML代码,如果浏览器支持Canvas,它将忽略<canvas>
内部的HTML,如果浏览器不支持Canvas,它将显示<canvas>
内部的HTML
2、进行绘制
绘制形状
我们可以在Canvas上绘制各种形状。在绘制前,我们需要先了解一下Canvas的坐标系统:
Canvas的坐标以左上角为原点,水平向右为X轴,垂直向下为Y轴,以像素为单位,所以每个点都是非负整数。
坐标格式(开始的x坐标,开始的y坐标,结束的x坐标,结束的y坐标)
var
canvas = document.getElementById('test-canvas'), //取的canvas
ctx = canvas.getContext('2d'); //告诉js要用2d进行绘制
ctx.clearRect(0,0,200,200); //清除一个矩形区域,Rect是矩形的意思
ctx.fillStyle = " red "; //填充的颜色是... fill是填充的意思
ctx.fillRect(0,0,200,200) //联系上下的意思就是填充一个矩形区域
ctx.fillText('内容',开始x坐标,开始y) //填充文字
单词解释:
fill是填充的意思,也可以理解为绘制
Rect是矩形的意思