HTML5 canvas(画布)用法笔记

canvas用法笔记

官方文档

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial

canvas介绍

canvas：画布。

<canvas id="canvasId" width="200" height="200">替换内容(一般不用写)</canvas> 

• 属性：<canvas>标签类似<img>，但没有src和alt属性，一般只设置width和height两个属性，默认为：width=300px, height=150px。设置其他属性不会影响绘制出的图像。

• 替换内容：替换内容在正常情况下会被浏览器忽略，而不支持<canvas>标签的浏览器会忽略<canvas>标签并渲染其中的替换内容。

基本用法

_绘制准备

检查支持性，后续代码中为节省篇幅，默认支持

// 检查支持性
let canvas = document.getElementById('canvasId');
if (canvas.getContext){
  // 绘制代码
} else {
  // 不支持的处理代码
}

<canvas>以左上角为圆点(0, 0)，支持两种形式的图形绘制：矩形和路径

// 创建canvas标签
<canvas id="canvasId" width="500" height="200"></canvas>

// css
<style>
	// 为了便于观察，此处添加了灰色背景
	#canvasId {background-color: #eee;}
</style>

// js
<script>
	let canvas = document.getElementById('canvasId');	// 获取canvas节点
	let ctx = canvas.getContext("2d");					// 创建2d对象
</script>

_绘制矩形

<canvas>共提供了三种矩形绘制方法

• fillReac(x, y, width, height) // 绘制填充矩形
• strokeRect(x, y, width, height) // 绘制矩形边框
• clearRect(x, y, width, height) // 清除矩形区域

// 矩形绘制函数
function drawRect() {
  let canvas = document.getElementById('canvasId');	// 获取canvas节点
  let ctx = canvas.getContext('2d');				// 创建2d对象

  ctx.fillRect(50, 50, 100, 100);					// 以坐标(50, 50)为起点绘制长宽为100的填充矩形
  ctx.strokeRect(200, 50, 100, 100);				// 以坐标(200, 50)为起点绘制长宽为100的矩形边框

  ctx.fillRect(350, 50, 100, 100);					// 以坐标(350, 50)为起点绘制长宽为100的填充矩形
  ctx.clearRect(400, 100, 50, 50);					// 以坐标(400, 100)为起点清除长宽为50的矩形区域
}
drawRect();		// 调用绘制函数

_{绘制三角形}

beginPath() // 新建路径
moveTo(x, y) // 移动笔触，以此为路径起点
lineTo(x, y) // 绘制直线路径
closePath() // 闭合路径
stroke() // 将绘制的路径画出来，不会自动闭合路径
fill() // 将绘制的路径画出来并实心填充路径内部，若路径未闭合将自动连接起点和终点

// 三角形绘制函数
function drawTriangle() {
    let canvas = document.getElementById('canvasId');
    let ctx = canvas.getContext('2d');

    ctx.beginPath();        // 新建路径，必须写
    ctx.moveTo(0, 50);    	// 移动笔触，以此为路径起点
    ctx.lineTo(100, 150);   // 绘制路径至目标点
    ctx.lineTo(200, 50);    // 绘制路径至下一目标点
    ctx.lineTo(0, 50);    	// 绘制路径至起点，使用ctx.closePath();也可达到相同效果
    ctx.stroke();           // 将所绘制的路径画出来，若不写则路径无法呈现，不会自动闭合路径

    ctx.beginPath();        // 新建路径，必须写
    ctx.moveTo(250, 50);    // 移动笔触，以此为绘制起点
    ctx.lineTo(350, 150);   // 划线至目标点
    ctx.lineTo(450, 50);    // 划线至下一目标点
    ctx.closePath();        // 闭合路径，不是必须的
    ctx.fill();             // 绘制路径并实心填充路径内部，若未闭合路径将自动连接起点和终点，
}
drawTriangle();		// 调用绘制函数

_绘制圆形

arc(x, y, radius, startAngle, endAngle, anticlockwise) // 绘制圆弧路径

• (x, y)：圆心，radius：半径，startAngle：起始弧度，endAngle：结束弧度，
• anticlockwise：布尔值，false为顺时针绘制，true为逆时针绘制，默认为false顺时针

注意：方法内用的是弧度而不是角度，换算方法为弧度 = 角度 / 180 * Math.PI

// 圆形绘制函数
function drawArc(){
    // 创建context2d对象
    let canvas = document.getElementById('canvasId');
    let ctx = canvas.getContext('2d');
    ctx.lineWidth = 20;     		// 设置路径宽度

    // 绘制半圆环
    ctx.strokeStyle = '#ff99ff';    // 设置路径颜色
    ctx.beginPath();
    // 以(100, 100)为圆心，50为半径，-90度为起始角度，180度为结束角度，按顺时针方向绘制
    ctx.arc(100, 100, 50, -Math.PI/2, Math.PI, false);
    ctx.stroke();

    // 绘制圆形
    ctx.strokeStyle = '#333';		// 设置路径颜色
    ctx.fillStyle = '#999';      	// 设置填充颜色
    ctx.beginPath();
    // 以(250, 100)为圆心，50为半径，0度为起始角度，360度为结束角度，按顺时针方向绘制
    ctx.arc(250, 100, 50, 0, Math.PI*2, false);
    ctx.stroke();					// 画出路径
    ctx.fill();						// 填充路径内部
    // 注释：由于路径宽度是在圆边框的内外各分配一半，在填充时圆边框内侧的路径会被覆盖

    // 绘制扇形
    ctx.fillStyle = '#ffff99';      // 设置填充颜色
    ctx.beginPath();
    // 以(400, 100)为圆心，60为半径，-90度为起始角度，240度为结束角度，按顺时针方向绘制
    ctx.arc(400, 100, 60, -Math.PI/2, -Math.PI/2 + 240/180*Math.PI, false);
    ctx.lineTo(400, 100);			// 绘制路径至圆心，若省略会得到被切掉一块的圆
    ctx.fill();
}
drawArc();		// 调用绘制函数

---

TODO 暂时只学到这，后面有时间再继续更新，如果想了解更多内容请阅读开头给的官方教程.