h5 canvas总结 学习笔记
注意：
1: canvas 图像的渲染有别于html图像的渲染，，canvas 的渲染极快，不会出现代码覆盖后延迟渲染的问题，写canvas 代码一定要具有同步思想
2: 在获取上下文时，一定要先判断浏览器是否能获取到getContext()方法
if （canvas.getContext）{
var ctx = canvas.getContext('2d')
}
3: 画布默认的宽高为300*150, 一定要用html的attribute的形式来定义画布的宽高, 通过css形式定义会缩放画布内的图像4: 绘制矩形的问题: 1.边框的宽高问题，边框宽高是在偏移量上下分别渲染一半，可能会出现小数边框，一旦出现小数边框都会向上取整
5: canvas的api只支持一种图像的直接渲染：矩形
6: 我们无法使用选择器来选中canvas中的图像
2.画布API
canvas.getContext(“2d”); 获取画布2d上下文
canvas.width 获取画布在横向上css像素的个数
canvas.height 获取画布在纵向上css像素的个数
canvas.toDataURL(); 拿到画布的图片地址
// 图片格式，默认为 image/png，强制改成steam流类型的。比如‘image/octet-stream’，浏览器就会自动帮我们另存为.. var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");window.location.href = image;
3.上下文API
ctx.fillRect(x,y,w,h); 填充矩形
ctx.strokeRect(x,y,w,h); 带边框的矩形
ctx.clearRect(0,0,canvas.width,canvas.height); 清除整个画布, 需要注意原点的位置
ctx.fill(); 通过填充路径的内容区域，生成实心的图形,会自动调用closePath();
ctx.stroke(); 通过线条来绘制图形轮廓,不会自动调用closePath()
ctx.fillStyle = “color”; 设置图形的填充颜色;
ctx.strockStyle = “color”; 设置图形的轮廓颜色;
ctx.lineWidth = 123; 设置绘制线条的宽度，必须是正数，不用带单位
ctx.beginPath(); 清除路径容器
ctx.closePath(); 闭合路径，ctx.fill();是自动闭合。ctx.stroke()是手动闭合。
ctx.save(); 将画布当前状态（样式相关 变换相关：平移、放缩、旋转、错切、裁剪）压入到样式栈中
ctx.restore(); 将样式栈中栈顶的元素弹到样式容器中，图像最终渲染依赖于样式容器
ctx.translate(x,y); 将原点按当前坐标轴位移x,y个单位
ctx.rotate(弧度); 将坐标轴按顺时针方向进行旋转
ctx.scale(); 缩放指定图像
ctx.moveTo(x,y); 将画笔抬起点到(x,y)处
ctx.line(x,y); 将画笔移到(x,y)处
ctx.rect(x,y,w,h); 绘制矩形的路径，需要再定义绘制为矩形框还是矩形填充
ctx.arc(x,y,r,degStart,degEnd,dir);绘制圆的路径（圆心x坐标，圆心y坐标，半径，开始弧度，结束弧度，绘制方向）
ctx.lineJoin = “round”; 定义线条与线条结合处（角）的样式：miter直角 / bevel斜角 / round圆角
ctx.lineCap = “round”; 定义线段末端的样式。
ctx.arcTo(x1,y1,x2,y2，r); 绘制扇形路径,两个坐标，一个半径，需要结合moveTo(x,y)使用，(x,y)点为该圆的起始点；(x1,y1)控制点；(x2,y2)结束点
ctx.quadraticCurceTo(cp1x , cp2y , x , y); 二次贝塞尔，结合moveTo(x,y)使用，(x,y)起始点；(x1,y1)控制点；(x2,y2)结束点。必须经过起始点和终点
ctx.bezierCurveTo(cp1x ,cp1y ,cp2x ,cp2y ,x ,y); 三次贝塞尔，结合moveTo(x,y)使用，(x,y)起始点；(x1,y1)控制点；(x2,y2)控制点；(x3,y3)结束点。必须经过起点和终点。
ctx.canvas: 指向canvas
背景图片
ctx.drawImage(img, x, y);，引入图片img,(需在图片加载完成后)，在canvas x,y处绘制图片
ctx.drawImage(img, x, y, w, h);，引入图片img,(需在图片加载完成后)，在canvas x,y处绘制图片，绘制宽度w，绘制高度h
ctx.drawImage(img, imgx, imgy, imgw, imgh, x, y, w, h);，,(需在图片加载完成后)，在图片img上，从imgx imgy开始截取，截取宽高imgw，imgh，绘制在canvas的x，y处，绘制宽高w，h.
渐变:
createLinearGradient(x1, y1, x2, y2) 创建线性渐变 接受 4 个参分别表示渐变的起点 (x1,y1) 与终点 (x2,y2)。
createRadialGradient(x1, y1, r1, x2, y2, r2) 创建一个径向/圆渐变 接受 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。
示例：var grd = ctx.createLinearGradient(0, 0, 200, 0);
示例：var grd = ctx.createRadialGradient(75, 75, 20, 75, 75, 100);
上色：
gradient.addColorStop(position, color) addColorStop 方法接受 2 个参数，position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置
阴影相关(文本阴影&盒模型阴影)
ctx.shadowOffsetX = float;用来设定阴影在 X 轴延申距离，默认为0，浮点型数据
ctx.shadowOffsetY = float;用来设定阴影在 Y 轴延申距离，默认为0
ctx.shadowBlur = float;设定阴影的模糊程度
ctx.shadowColor = “color”;（必须项）设定阴影颜色效果
文本相关：
ctx.fillText(text,x,y);在(x,y)位置填充指定的文本, 起始的横纵坐标
ctx.strokeText(text,x,y);在(x,y)位置绘制文本边框
ctx.font = “10px sans-serif”;指定绘制文本的样式，font属性在指定时，必须有大小和字体
ctx.measureText(“文本”);返回一个持有文本渲染宽度的对象
ctx.textAlign = “left/right/center”;指定文本对齐方式。
ctx.fillText('canvas文本', 200, 100); 默认, left, strat 都是这样
ctx.textAlign = 'center'; 居中对齐
ctx.textAlign = 'right'; right，end都是这样
ctx.textBaseline = “top/middle/bottom”;指定文本基线对齐的方式
ctx.fillText('canvas文本', 200, 200); 默认，纵坐标为200的线
ctx.textBaseline = 'middle'; middle
ctx.textBaseline = 'bottom'; bottom
ctx.textBaseline = 'top'; top
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！