前述
canvas本身没有绘制能力，必须使用脚本来完成实际的绘图任务
getContext()：方法返回一个对象，该对象提供了用于在画布上绘图的方法和属性
如果不设置canvas的宽高，浏览器默认生成一个200 * 150的矩形
<canvas id="canvas"></canvas> // 定义一个ID名为canvas的canvas元素
let canvas = document.getElementById('canvas');// 获取元素
let canContent = canvas.getContext('2d');// 定义getContext对象
// 下面的例子皆使用上述内容进行演示
1. fillStyle：填充
// 以下例子是填充单一颜色
canContent.fillStyle = 'orange';// 填充
canContent.fillRect(0,0,600,200);// 绘制被填充的矩形，参数分别为：X轴坐标，Y轴坐标，矩形的宽，矩形的高
效果展示：
// 以下例子是填充线性渐变
let gradient = canContent.createLinearGradient(0,20,0,120);// 创建线性渐变，参数分别为：渐变开始点X轴左边，Y轴坐标，渐变结束点X轴坐标，Y轴坐标，想要更改颜色在图形中的位置和大小更改这个方法的参数即可
gradient.addColorStop(0,'orange');// 定义渐变的颜色和位置，参数分别为：位置（0-1之间的数字）表示渐变开始到结束之间的位置，颜色，可以设置多个
gradient.addColorStop(0.5,'yellow');
gradient.addColorStop(1,'red');
canContent.fillStyle = gradient;// 填充
canContent.fillRect(0,0,600,200);// 设置绘制的坐标和图形尺寸
效果展示：
// 以下例子是填充图像
let img = document.getElementById('img');// 获取要填充到图形中的图片
let imgContent = canContent.createPattern(img, 'repeat');// 在指定放上重复指定元素，参数分别为：要填充的图片，是否重复
canContent.rect(0,0,600,600);// 绘制矩形（无颜色），参数分别为：X轴坐标，Y轴坐标，矩形的宽，矩形的高
canContent.fillStyle = imgContent;// 将设置好的图片填充到图形中
canContent.fill();// 绘制设置好的图形
效果如下：
2. strokeStyle：设置或者返回笔触颜色
// 以下例子是单一颜色
canContent.strokeStyle = 'orange';// 设置笔触颜色
canContent.strokeRect(20,20,150,100);// 绘制无填充矩形，参数分别为：X轴坐标，Y轴坐标，矩形的宽，矩形的高
效果如下：
// 设置渐变色笔触图形
let gradient = canContent.createLinearGradient(0,20,0,120);
gradient.addColorStop(0,'orange');
gradient.addColorStop(0.5,'yellow');
gradient.addColorStop(1,'red');
canContent.strokeStyle = gradient;// 设置笔触颜色
canContent.lineWidth = 10;// 设置线条宽度
canContent.strokeRect(20,20,150,100);// 绘制无填充矩形，参数分别为：X轴坐标，Y轴坐标，矩形的宽，矩形的高
效果如下：
// 绘制渐变文字
canContent.font = '30px Verdana';// 设置文字样式
let gradient = canContent.createLinearGradient(0,20,0,120);
gradient.addColorStop(0,'orange');
gradient.addColorStop(0.5,'yellow');
gradient.addColorStop(1,'red');
canContent.strokeStyle = gradient;
canContent.strokeText('bb怪',60,80);// 绘制文本，无填充，参数分别为：文字内容，X周坐标，Y轴坐标
效果如下：
3. shadowColor：设置或者返回阴影颜色
4. shadowOffsetX ：设置阴影X轴的偏移
5. shadowOffsetY ：设置阴影Y轴的偏移
6. shadowBlur ：设置阴影模糊程度
canContent.shadowBlur = 20;// 设置阴影模糊程度
canContent.shadowOffsetX = 20;// 设置阴影X轴的偏移
canContent.shadowOffsetY = 15;// 设置阴影Y轴的偏移
canContent.shadowColor = 'red';// 设置阴影颜色
canContent.fillStyle = 'orange';
canContent.fillRect(20,20,100,100);
效果如下：
7. createRadialGradient：设置径向渐变
let gradient = canContent.createRadialGradient(10,10,5,90,60,40);// 创建线性渐变，参数分别为：渐变开始点X轴左边，Y轴坐标，渐变结束点X轴坐标，Y轴坐标
gradient.addColorStop(0,'orange');
gradient.addColorStop(0.5,'yellow');
gradient.addColorStop(1,'red');
canContent.fillStyle = gradient;
canContent.fillRect(20,20,150,100);
效果如下：
8. lineCap：设置线条端点样式
9. moveTo：设置路径的位置
10. lineTo：添加一个新点，然后在画布中创建从该点到最后指定点的线条
11. stroke：绘制已定义的路径
canContent.beginPath();// 起始一条路径
canContent.lineCap = 'round';// 设置线条端点样式，round：圆形，square：方形
canContent.moveTo(60,20);// 把路径移动到画布中的指定点，不创建线条,参数分别为：X轴位置，Y轴位置
canContent.lineTo(100,300);// 添加一个新点，然后在画布中创建从该点到最后指定点的线条
canContent.stroke();// 绘制已定义的路径
效果如下：
12. lineJoin：设置两条相交的线拐角的形状
13. lineWidth ：设置线条宽度
canContent.beginPath();// 起始一条路径
canContent.lineJoin = 'round';// 设置拐角形状，bevel：斜角，round：圆角，miter：尖角
canContent.lineWidth = 30;
canContent.moveTo(20,20);// 把路径移动到画布中的指定点，不创建线条,参数分别为：X轴位置，Y轴位置
canContent.lineTo(100,50);// 添加一个新点，然后在画布中创建从该点到最后指定点的线条
canContent.lineTo(20,300);// 添加一个新点，然后在画布中创建从该点到最后指定点的线条
canContent.stroke();// 绘制已定义的路径
效果如下：
14. miterLimit：设置最大斜接长度
canContent.lineJoin = 'miter';
canContent.lineWidth = 10;
canContent.miterLimit = 5;
canContent.moveTo(20,20);// 把路径移动到画布中的指定点，不创建线条,参数分别为：X轴位置，Y轴位置
canContent.lineTo(50,27);// 添加一个新点，然后在画布中创建从该点到最后指定点的线条
canContent.lineTo(20,34);// 添加一个新点，然后在画布中创建从该点到最后指定点的线条
canContent.stroke();// 绘制已定义的路径
// 注意：miterLimit 属性只有在设置了lineJoin 属性值为miter时才生效
效果如下：
15. clearRect：清空指定内容
canContent.fillStyle = 'orange';
canContent.fillRect(20,20,300,300);// 绘制一个300*300的矩形
canContent.clearRect(40,40,30,20);// 在已绘制矩形中清空一个30*20的矩形，参数分别为：X轴坐标，Y轴坐标，矩形的宽，矩形的高
效果如下：
16. fill：填充当前绘图
canContent.rect(10,20,240,193);
canContent.fillStyle = 'orange';
canContent.fill();
// 如未使用fillStyle设置填充颜色，则会默认为黑色，如填充的路径未关闭，会从路径起点至结束点添加一条线，关闭路径后进行绘制
效果如下：
17. closePath：创建从当前点到起点的路径
canContent.moveTo(20,20);// 把路径放到X轴20，Y轴20
canContent.lineTo(20,100);// 添加一个点，从X轴20，到Y轴100
canContent.lineTo(70,100);// 添加一个点，从X轴70，到Y轴100
canContent.closePath();// 绘制从当前点到起点的路径
canContent.stroke();// 绘制笔触
canContent.fillStyle = 'orange';// 设置填充颜色
canContent.fill();// 填充图形
效果如下：
18. clip：在原始画布中剪切一个指定区域（在指定的画布中，得到一个区域对这个区域进行操作）
canContent.rect(20,20,150,200);
canContent.stroke();
canContent.clip();// 创建区域
canContent.fillStyle = 'orange';
canContent.fillRect(30,0,100,80);
效果如下：
19. quadraticCurveTo：绘制一条二次贝塞尔曲线
canContent.beginPath();
canContent.moveTo(20,120);
canContent.quadraticCurveTo(20,20,290,200);// 绘制曲线，参数分别是：控制点X轴控制点Y轴，结束点X轴，结束点Y轴
canContent.stroke();
效果如下：
20. arc：绘制圆或者圆弧
canContent.beginPath();
canContent.arc(100,75,20,0,2,false);// 绘制圆，参数分别是：圆心的X坐标，Y坐标，圆的半径，起始角，结束角，顺时针、逆时针绘制，true：逆时针，false：顺时针
canContent.stroke();
// 注意：创建圆必须设置起始角为0和结束角为2*Math.PI
效果如下：
21. arcTo：绘制两条切线之间的弧
canContent.beginPath();
canContent.beginPath();
canContent.moveTo(20,20);
canContent.lineTo(100,20);
canContent.arcTo(150,20,150,30,50);// 创建弧线，参数分别为：起点X坐标，Y坐标，终点X坐标，Y坐标，弧的半径
canContent.lineTo(150,120);
canContent.stroke();
效果如下：
22. isPointInPath：测试指定点是否位于当前路径中
canContent.rect(20,30,100,302);
if (canContent.isPointInPath(20,50)){
canContent.stroke();
}
// 如果X轴20，Y轴50位于绘制的矩形中，则返回true进行绘制，否则返回false，不进行绘制
22. scale：缩放
canContent.strokeRect(10,10,50,30);
canContent.scale(2,2);// 缩放，参数分别是：宽缩放值，高缩放值
canContent.strokeRect(10,10,50,30);
canContent.scale(2,2);
canContent.strokeRect(10,10,50,30);
效果如下：
23. rotate：旋转
canContent.rotate(20*Math.PI/180);// 旋转，参数是旋转角度，公式：旋转角度*Math.PI/180
canContent.fillRect(50,20,150,100);
效果如下：
24. translate：重新映射到画布上的位置
canContent.fillRect(20,20,150,100);
canContent.translate(120,120);
canContent.fillRect(20,20,150,100);
效果如下：
25. transform：变形
canContent.fillStyle = 'orange';
canContent.fillRect(0,0,80,50);
canContent.transform(1,0.5,-0.5,1,30,10);// 变形，参数分别为：水平缩放、水平倾斜，垂直倾斜，垂直缩放，水平移动，垂直移动的值
canContent.fillStyle = 'red';
canContent.fillRect(0,0,80,50);
canContent.transform(1,0.5,0.5,1,30,10);
canContent.fillStyle = 'yellow';
canContent.fillRect(0,0,80,50);
效果如下：
26. setTransform：变形
canContent.fillStyle = 'orange';
canContent.fillRect(0,0,80,50);
canContent.setTransform(1,0.5,-0.5,1,30,10);// 变形，参数分别为：水平缩放、水平倾斜，垂直倾斜，垂直缩放，水平移动，垂直移动的值
canContent.fillStyle = 'red';
canContent.fillRect(0,0,80,50);
canContent.setTransform(1,0.5,0.5,1,30,10);
canContent.fillStyle = 'yellow';
canContent.fillRect(0,0,80,50);
// 注：setTransform和transform的区别，transform是以上一个绘制的图形为基础进行变形，例：第一个矩形设置水平移动20，第二个矩形同样设置水平移动20，
// 则第二个矩形的水平位置是在40；而setTransform是基于初始位置进行设置的，第一个矩形设置的水平评议20，第二个矩形也设置水平评议20，则两个矩形会重叠
效果如下：
27. font：文字
28. fillText：绘制文字
canContent.font = 'oblique small-caps 700 20px Arial';// 设置文字样式，参数分别可以为：字体样式：normal，italic：斜体，oblique，文字变体：normal，
// small-caps：转换大小写，字体粗细，字号，行高，字体，还有其他很少用未列举
canContent.fillText('orange',10,40);// 绘制文字，参数分别为：文字内容、X轴距离，Y轴距离，最大文本宽度（选填）
效果如下：
29. textAlign：设置文字对齐方式
canContent.strokeStyle = 'orange';
canContent.moveTo(100,20);
canContent.lineTo(100,100);
canContent.lineWidth = 2;
canContent.stroke();
canContent.textAlign = 'start';// 从指定位置开始显示
canContent.fillText('start',100,30);// 设置文字内容，指定X轴位置，Y轴位置
canContent.textAlign = 'center';// 中心点在指定位置上
canContent.fillText('center',100,60);
canContent.textAlign = 'end';// 在指定位置结束
canContent.fillText('end',100,40);
canContent.textAlign = 'left';// 文字左对齐
canContent.fillText('left',100,70);
canContent.textAlign = 'right';// 文字右对齐
canContent.fillText('right',100,90);
效果如下：
31. textBaseline：设置文字基线
canContent.strokeStyle = 'orange';
canContent.moveTo(5,100);
canContent.lineTo(400,100);
canContent.lineWidth = 2;
canContent.stroke();
canContent.font = '20px Arial';
canContent.textBaseline = 'top';// 顶部从指定位置开始
canContent.fillText('top',5,100);
canContent.textBaseline = 'bottom';// 底部在指定位置结束
canContent.fillText('bottom',5,100);
canContent.textBaseline = 'middle';// 中心在指定位置
canContent.fillText('middle',100,100);
32. measureText：测量文本宽度
canContent.font = '30px Arial';
let text = 'orange';
canContent.fillText('Width:'+canContent.measureText(text).width,10,50);// text：要测量的文本
33. drawImage：绘制图片、视频
let canvas = document.getElementById('canvas');
let img = document.getElementById('img');
let canContent = canvas.getContext('2d');
canContent.drawImage(img, 10,20);// 绘制图片、视频，参数分别为：获取到的图片、视频，图片X轴坐标，Y轴坐标
// 注：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);// 完整参数：获取到的图片、视频，开始剪切的X轴坐标，Y轴坐标，
// 剪切的宽度，高度，图片的X轴坐标，Y轴坐标，宽度，高度
34. width：图像宽度
35. height：图像高度
let canvas = document.getElementById('canvas');
let img = document.getElementById('img');
let canContent = canvas.getContext('2d');
console.log("width of img is:"+img.width);// 获取图片的宽度
console.log("height of img is:"+img.height);// 获取图片的高度
结果如下：
36. createImageData：创建空白图像对象
37. putImageData：把设置好的图形对象放到画布上
let img = canContent.createImageData(100,100);// 创建新的空白的img对象，默认相对值为 transparent black
for (let i=0;i<img.data.length;i+=8){// 通过对img中的每个像素设置颜色，设置整个对象的颜色
// 设置第一个像素的颜色
img.data[i+0] = 255;
img.data[i+1] = 0;
img.data[i+2] = 0;
img.data[i+3] = 255;
// 设置第二个像素的颜色
img.data[i+4] = 0;
img.data[i+5] = 255;
img.data[i+6] = 0;
img.data[i+7] = 255;
}
canContent.putImageData(img,10,10);// 把设置好的图形放回到画布上
效果如下：
38. getImageData：获取图像的数据
let canvas = document.getElementById('canvas');
let img = document.getElementById('img');
let canContent = canvas.getContext('2d');
canContent.drawImage(img, 0,0);
let imgData = canContent.getImageData(0,0,canvas.width,canvas.height);// 获取到当前图像的数据
for (let i=0;i<imgData.data.length;i+=4){// 将图像的颜色翻转
imgData.data[i] = 255 - imgData.data[i];
imgData.data[i+1] = 255 - imgData.data[i+1];
imgData.data[i+2] = 255 - imgData.data[i+2];
imgData.data[i+3] = 255;
}
canContent.putImageData(imgData, 0,0);
效果如下：
39. globalAlpha：设置透明度
canContent.fillStyle = 'orange';
canContent.fillRect(0,0,100,80);
canContent.globalAlpha = 0.5;// 设置透明度，0-1之间的数值
canContent.fillStyle = 'yellow';
canContent.fillRect(45,45,100,80);
效果如下：
40. globalCompositeOperation ：设置怎么将一个新图像绘制到已有图像上
canContent.fillStyle = 'yellow';
canContent.fillRect(0,0,140,80);
canContent.globalCompositeOperation="xor";// 效果图均是修改的这个值
canContent.fillStyle = 'orange';
canContent.fillRect(40,40,140,80);
// source-over：默认，在已有对象上显示新对象；
// source-atop：在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
// source-in：在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
// source-out：在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。
// destination-over：在源图像上方显示目标图像。
// destination-atop：在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
// destination-in：在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
// destination-out:在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
// lighter：显示源图像 + 目标图像。
// copy：显示源图像。忽略目标图像。
// xor：使用异或操作对源图像与目标图像进行组合。
效果如下：
823
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
