一.Canvas绘图基础
什么是: Canvas是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。
大多数 Canvas 绘图 API 都没有定义在 canvas 元素本身上，而是定义在通过画布的getContext() 方法获得的一个“绘图环境”对象上。
绘制时一定要在context绘图环境下绘制
*canvas是基于状态的绘制 把状态和绘制分开
1.HTML
<canvas id="canvas"></canvas>
2.JavaScript
设置绘图环境
var canvas = document.getElementById(‘canvas’)
var context = canvas.getContext(“2d”)
使用context绘制 先设置起始点,终点和各种状态,再进行绘制
1.canvas的API
1.canvas.width canvas.height canvas.getContext("2d")
设置绘图上下文环境
2.context.moveTo(x,y)
定义绘图起始点与节点
3.context.lineTo(x,y)
定义绘图结束点
4.context.arc(cx, cy, r, sAng, eAng, anticlock = false )
绘制圆或圆弧 圆心x轴坐标, 圆心y轴坐标, 半径, 起始点, 结束点, 绘制方向
5.context.beginPath()
开始一段 新的 绘图
6.context.closePath()
结束一段绘制
7.context.lineWidth
指定线条宽度
8.context.strokeStyle = "rgba(12, 12, 3, .5)"
指定线条颜色
9.context.fillStyle = "color"
设置填充颜色
10.context.stroke()
怎么用: stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色
11.context.fill()
对某个封闭图形进行填充
12.context.clearRect(x,y, width, height)
x轴点, y轴点, 宽度, 高度 刷新当前画布上指定矩形区域内的图形
2.使用JS定时器进行动画
setInterval(
function(){
render(); //进行渲染
update(); //进行底层数据刷新
},50)
二.canvas绘图详解
1.绘制封闭多边形 将多段线条放入beginPath() 和 closePath()
问题: 填充颜色时,会覆盖掉一半的边框
解决: 将颜色填充放到绘制线条前
2.rect函数
context.rect(x, y, width, height)
绘制一个矩形的边框路径
context.fillRect(x, y, width, height)
绘制填充矩形
context.strokeRect(x, y, width, height)
绘制一个带有边框的矩形
3.lineCap
线条属性,只能用于开头结尾,不能用于连接处
butt(默认值) round(圆头) square(方头)
4.lineJoin
设置线条连接处的样式
miter(默认值,尖头) bevel(斜角) round(圆角)
①miterLimit 只能用于miter,
5.状态保存
save()
保存之前的绘图状态
context.restore()
返回之前context.save()保存的绘图状态
6.图形变换
translate(x,y) 位移
在位移后需要再移动回去 translate(-x, -y)
解决用状态保存
rotate(deg) 旋转
scale(x,y) 缩放
会对其他属性如 边框, 起始位置 等也会产生缩放
7.变换矩阵
a c e a 水平缩放(1) b 水平倾斜(0) c 垂直倾斜(0)
b d f d 垂直缩放(1) e 水平位移(0) f 垂直位移(0)
0 0 1
transfrom(a, b, c, d, e, f)
transfrom可以多个进行级联
setTransform(a, b, c, d, e, f)
忽略掉以前所有的transform,将变换矩阵重置为单位矩阵,再传入数据
8.填充样式
fillStyle 线性渐变
1.设置线性渐变填充色
① var linearGrd = context.createLinearGradient(xstart, ystart, xend, xend) //设置起点 与 终点
② linearGrd.addColorStop(stop, color) //设置终点 与 颜色
填充颜色
context.fillStyle = linearGrd
2.设置径向渐变
① var grd = context.createRadialGradient(x0, y0, r0, x1, y1, r1) //设置两个圆的圆心和半径
② grd.addColorStop(stop, color)
3.设置图片填充
createPattern(img/canvas/video, repeat-style) no-repeat 不重复 repeat-x 横向重复 repeat-y 纵向重复 repeat 重复
图片填充通常是为了表现一种纹理或背景
还可以用视频作为背景填充
使用:
var backgroundImage = new Image()
background.src = “url”
var pattern = context.createPattern(backgroundImage, “no-repeat”)
context.fillStyle = pattern
context.fillRect(0,0,800,800)
9.曲线绘制
arc
先用moveTo创建开始点
再用acrTo(x1, y1, x2, y2, radius) 绘制一条圆弧
从(x1,y1) 与 (x2, y2)形成一个直角 radius是半径
半径与直角有两个相切点,两个切点形成一条圆弧
10.贝塞尔二次曲线
使用: moveTo(x0, y0)创建开始点
quadraticCurveTo(x1, y1, x2, y2) 指定控制点 和 结束点
11.贝塞尔三次曲线
使用:
moveTo(x0, y0) 移动到起始点
bezierCurveTo(x1, y2, x2, y2, x3, y3) 两个控制点 一个结束点
三.文字渲染基础
1.设置字体样式
font 默认值 ‘20px sans-serif’
font-style: normal italic(斜体) oblique(倾斜字体)
font-variant: normal small-caps(小型大写字母)
font-weight: lighter(更细) normal bold bolder(更粗) 100~900
font-size: 20px默认 xx-small x-small medium large x-large xx-large
font-family: 设置多种字体备选 支持@font-face(向浏览器注入新字体) web安全字体
2.开始绘制文字
fillText(string, x, y,[maxlen]) maxlen 指文本行最大宽度
3.绘制一行只有边框的文字
strokeText(string, x, y, [maxlen])
可以用渐变 图片填充等设置文字颜色
4.基于起始点调整文本水平位置
left center right
textAlign
5.基于中间线调整文本垂直位置
textBaseline
top middle bottom alphabetic默认值(基于拉丁语的基准线) ideographic(基于中文,日文等方块字) hanging(基于印度文字)
6.文本的度量
measureText(string).Width
传入字符串,返回一个对象,计算字符串的渲染宽度
四.高级canvas
1.阴影
shadowColor
阴影颜色
shadowOffsetX
shadowOffsetY
阴影位移值
shadowBlur
阴影模糊值
2.全局透明度
globalAlpha = 1(default)
3.设置遮挡效果
globalCompositeOperation
source-over 默认值 后绘制的压在先绘制的图形上
destination-over 先绘制的压再后绘制的图形上
destination-over 在源图像上方显示目标图像。
源图像 先绘制的 目标图像 后绘制的
source-atop 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in 在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
source-out 在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。
destination-atop 在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示
destination-in 在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
destination-out 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
lighter 显示源图像 + 目标图像。
copy 显示源图像。忽略目标图像。
xor 使用异或操作对源图像与目标图像进行组合。
4.剪辑区域
clip()
使用clip()规划任意路径,再用stroke()绘制,之后所有绘制都会限制到这个区域
5.非零环绕原则
判断图形内外侧
从一块区域向外引一条射线,图形路径为顺时针+1,逆时针-1,为0则在外面,不为0,在里面
规划路径通过相反路径,来做剪纸,镂空等效果
6.对指定矩形区域进行清空
clearRect(x, y, width, height)
7.为元素添加事件
canvas.addEventListener(“mousemove”, detect)
8.获取鼠标位置
var x = event.clientX - canvas.getBoundingClientRect().left;
var y = event.clientY - canvas.getBoundingClientRect().top;
9.判断鼠标传入位置
isPointInPath()方法返回 如果指定的点位于当前路径中true,否则返回 false
isPointInPath(x, y)
10.HTML与canvas
html不能放在canvavs中
canvas不是透明的,是白色的
11.canvas的原型对象
CanvasRenderingContext2D
制作自己的绘图函数