前述
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:使用异或操作对源图像与目标图像进行组合。
效果如下: