Canvas 使用 ​

使用 ​

<canvas id="canvas" width="600" height="400">您的浏览器不支持 Canvas</canvas>

// /** @type {HTMLCanvasElement} **/
// 1.找到画布
var canvas = document.getElementById('canvas')
// 判断是否有getContext
if (!canvas.getContext) {
  console.log('当前浏览器不支持canvas，请下载最新的浏览器')
}
//  2.获取画笔
var context = canvas.getContext('2d')
console.log(context)
// 3.绘制图形
context.fillRect(100, 200, 300, 300)

属性方法 ​

• strokeStyle 设置或返回描边颜色
• fillStyle 设置或返回填充颜色
• stroke() 描边已定义绘图（路径）
• fill() 填充当前绘图（路径）
• moveTo(x,y) 把路径移动到画布中的指定点，不创建线条。
• lineTo(x,y) 添加一个新点,绘制一条从当前位置到指定新点(x,y)位置的直线。
• lineWidth 设置或返回当前的线条宽度
• lineJoin 设置或返回两条线相交时，所创建的拐角类型
• lineCap 设置或返回线条的结束端点样式
• beginPath() 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。生成路径的第一步- 叫做 beginPath()。
• closePath() 闭合路径之后图形绘制命令又重新指向到上下文中。不是必需的。