Canvas入门小结
# 1、Canvas简介
Canvas 是为了解决 Web 页面中只能显示静态图片这个问题而提出的一个可以使用 JavaScript 等脚本语言向其中绘制图像的 HTML 标签。
使用场景:绘制图表、小游戏、活动页面、小特效、炫酷背景
# 2、Canvas入门
//1、创建画布
<canvas id="canvas"></canvas>
//2、HTML/CSS/JS设置width、height
//3、获取canvas对象
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = 400;
canvas.height = 400;
//4、绘制图形
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 3、绘制图形
# 3.1 绘制路径
fill() //填充路径
stroke() //描边
arc(x,y,r,sAngle,eAngle,counterclockwise) //创建圆弧(x坐标,y坐标,半径,起始角,结束角,顺/逆时针)
rect() //创建矩形
fillRect() //绘制矩形路径区域
strokeRect() //绘制矩形路径描边
clearRect() //在给定的矩形内清除指定的像素
arcTo() //创建两切线之间的弧/曲线
beginPath() //起始一条路径,或重置当前路径
moveTo() //把路径移动到画布中的指定点,不创建线条
lineTo() //添加一个新点,然后在画布中创建从该点到最后指定点的线条
closePath() //创建从当前点回到起始点的路径
clip() //从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo() //创建二次方贝塞尔曲线
bezierCurveTo() //创建三次方贝塞尔曲线
isPointInPath() //如果指定的点位于当前路径中,则返回 true,否则返回 false...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 3.2 颜色、样式和阴影
context.fillStyle=color|gradient|pattern; //设置或返回用于填充绘画的颜色、渐变或模式
context.strokeStyle=color|gradient|pattern; //设置或返回用于笔触的颜色、渐变或模式
context.shadowColor=color; //设置或返回用于阴影的颜色
context.shadowBlur=number; //设置或返回用于阴影的模糊级别
context.shadowOffsetX=number; //设置或返回阴影距形状的水平距离
context.shadowOffsetY=number; //设置或返回阴影距形状的垂直距离
context.createLinearGradient(x0,y0,x1,y1) //创建线性渐变(用在画布内容上)
context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat"); //在指定的方向上重复指定的元素
context.createRadialGradient(x0,y0,r0,x1,y1,r1) //创建放射状/环形的渐变(用在画布内容上)
gradient.addColorStop(stop,color); //规定渐变对象中的颜色和停止位置(stop=0~1)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 3.3 线条样式
context.lineCap="butt|round|square"; //线条的结束端点样式
context.lineJoin="miter|bevel|round"; //两条线相交时拐角类型(尖角|斜角、圆角)
context.lineWidth=number; //设置或返回当前的线条宽度
context.miterLimit=number; //设置或返回最大斜接长度
1
2
3
4
2
3
4
# 3.4 矩形
context.rect(x,y,width,height); //创建矩形
context.fillRect(x,y,width,height) //绘制“被填充”的矩形
context.strokeRect(x,y,width,height) //绘制矩形(无填充)
context.clearRect(x,y,width,height) //在给定的矩形内清除指定的像素
1
2
3
4
2
3
4
# 3.5 转换
context.scale(scalewidth,scaleheight) //缩放当前绘图至更大或更小
context.rotate(angle) //旋转当前绘图
context.translate(x,y) //重新映射画布上的 (0,0) 位置
context.transform(a,b,c,d,e,f) //替换绘图的当前转换矩阵(水平缩放绘图、水平倾斜绘图、垂直倾斜绘图、垂直缩放绘图、水平移动绘图、垂直移动绘图)
context.setTransform(a,b,c,d,e,f) //将当前转换重置为单位矩阵。然后运行 transform()
1
2
3
4
5
2
3
4
5
# 3.6 文本
context.font="italic small-caps bold 12px arial"; //设置或返回文本内容的当前字体属性
context.textAlign="center|end|left|right|start"; //设置或返回文本内容的当前对齐方式
context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom"; //设置或返回在绘制文本时使用的当前文本基线
context.fillText(text,x,y,[maxWidth]); //在画布上绘制“被填充的”文本
context.strokeText(text,x,y,[maxWidth]) //在画布上绘制文本(无填充)
context.measureText(text).width //返回包含指定文本宽度的对象
1
2
3
4
5
6
2
3
4
5
6
# 3.7 图像
//向画布上绘制图像|画布|视频(图像、[剪切位置、宽高]、x坐标、y坐标、[宽高])
context.drawImage(img,[sx,sy,swidth,sheight],x,y,[width,height]);
//width 返回 ImageData 对象的宽度
//height 返回 ImageData 对象的高度
//data 返回一个对象,其包含指定的 ImageData 对象的图像数据
context.createImageData(width,height) //以指定的尺寸(以像素计)创建新的 ImageData 对象
var imgData=context.createImageData(imageData) //创建与指定的另一个 ImageData 对象尺寸相同的新 ImageData 对象(不会复制图像数据)
getImageData(x,y,width,height) //返回 ImageData 对象,该对象为画布上指定的矩形复制像素数据
putImageData(imgData,x,y,[dirtyX,dirtyY,dirtyWidth,dirtyHeight]) //把图像数据(从指定的 ImageData 对象)放回画布上
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 3.8 合成
context.globalAlpha=number; //设置或返回绘图的当前 alpha 或透明值
context.globalCompositeOperation="..."; //设置或返回新图像如何绘制到已有的图像上
//="source-over|source-atop|source-in|source-out|destination-over|destination-atop|destination-in|destination-out|lighter|copy|xor"
1
2
3
2
3
# 3.9 其他
context.save(); //保存当前环境的状态
context.restore(); //返回之前保存过的路径状态和属性
1
2
2
# 4、炫酷背景特效通性
- 背景(单一颜色、渐变、平铺)
- 炫酷(动、随机)
- 特效(鼠标跟随、视觉差)
# 5、Canvas优化
- 避免浮点数的坐标点
- 使用多层画布去画一个复杂的场景
- 用 CSS transforms 特性缩放画布
- 离屏渲染
- Canvas案例
# 6、Canvas示例
//...
1
上次更新: 2021/01/08, 18:01:00
← 算法 Canvas案例收集→