canvas

<canvas id="canvas"></canvas>

js

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'green'; //颜色必须在画出来之前
ctx.fillRect(10, 10, 100, 100);

不建议用css控制canvas宽高，会等比缩放。852

CanvasRenderingContext2D.fillRect()
填充一个矩形
参数分别为x,y,width,height。

CanvasRenderingContext2D.strokeRect()
画出一个矩形边框。
参数分别为x,y,width,height。

CanvasRenderingContext2D.clearRect()
是 Canvas 2D API 设置指定矩形区域内（以 点 (x, y) 为起点，范围是(width, height) ）所有像素变成透明，并擦除之前绘制的所有内容的方法。
clearRect(x, y, width, height)

CanvasRenderingContext2D.beginPath()
是 Canvas 2D API 通过清空子路径列表开始一个新路径的方法。 当你想创建一个新的路径时，调用此方法。

CanvasRenderingContext2D.moveTo()
是 Canvas 2D API 将一个新的子路径的起始点移动到(x，y)坐标的方法。
ctx.moveTo(x, y)

CanvasRenderingContext2D.lineTo()
是 Canvas 2D API 使用直线连接子路径的终点到x，y坐标的方法（并不会真正地绘制）。
ctx.lineTo(x, y);

CanvasRenderingContext2D.stroke()
是 Canvas 2D API 使用非零环绕规则，根据当前的画线样式，绘制当前或已经存在的路径的方法。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(200, 50);
ctx.stroke();

beginPath()开始 ，moveTo()移动画笔，lineTo()决定要从画笔现在位置连接到的坐标并移动到该坐标，
stroke()画出这条线。

image.png

CanvasRenderingContext2D.fill()
是 Canvas 2D API 根据当前的填充样式，填充当前或已存在的路径的方法。采取非零环绕或者奇偶环绕规则。

CanvasRenderingContext2D.fillStyle
ctx.fillStyle = color;
ctx.fillStyle = gradient;//填充渐变的对象CanvasRenderingContext2D.createLinearGradient(), CanvasRenderingContext2D.createRadialGradient()

ctx.fillStyle = pattern;//重复的对象

填充出一个三角形

ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(50,10);
ctx.lineTo(30,30);
ctx.fillStyle='red';
ctx.fill();

image.png

注意：当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。

CanvasRenderingContext2D.arc()
是 Canvas 2D API 绘制圆弧路径的方法。 圆弧路径的圆心在 (x, y) 位置，半径为 r ，根据anticlockwise （默认为顺时针）指定的方向从 startAngle 开始绘制，到 endAngle 结束。
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)
x 圆弧中心（圆心）的 x 轴坐标。
y 圆弧中心（圆心）的 y 轴坐标。
radius 圆弧的半径。
startAngle 圆弧的起始点， x轴方向开始计算，单位以弧度表示。
endAngle 圆弧的终点， 单位以弧度表示。
anticlockwise 可选的Boolean值 ，如果为 true，逆时针绘制圆弧，反之，顺时针绘制。

lineWidth = 宽度

移动端
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

手机不适合用mouse事件
改用touch事件
ontouchstart
ontouchmove
ontouchend

touch与mouse有些区别
touchEvent.touches[n]
touch事件可能有多个点同时被按