canvas 怎么调试？前端之canvas学习
canvas 怎么调试？前端之canvas学习Canvas提供了几种方式绘制矩形：所有其他图形都至少需要生成一种路径。<canvas width="100" height="100" id="canva"> <p>您的浏览器版本暂不支持Canvas 请进行升级</p> </canvas> var canvas = document.getElementById('canva'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); // drawing code here } else { // canvas-unsupported code here } 三、Canvas的坐标系统Canvas的坐标系统以左上角为原点，水平向右为X轴，垂直向下为Y轴，以像素为单位，所以每个点都是非负整数。Canvas只支持一种原
一、什么是Canvas
没有canvas的年代，绘图只能借助Flash，页面不得不用JavaScript和Flash进行交互，而现在可以直接用Html5的canvas元素使用JavaScript在网页上绘制图形。
Canvas指定了尺寸，可以在这个范围内任意绘制。
Canvas拥有多种绘制路径、矩形、圆形、字符以及添加图形的方法。
二、Canvas的环境由于浏览器对HTML5标准支持不一致，所以通常在<canvas>的内部添加一些说明性HTML代码，如果不支持将显示其内部的HTML。
<canvas width="100" height="100" id="canva"> <p>您的浏览器版本暂不支持Canvas 请进行升级</p> </canvas>
var canvas = document.getElementById('canva'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); // drawing code here } else { // canvas-unsupported code here }
Canvas的坐标系统以左上角为原点，水平向右为X轴，垂直向下为Y轴，以像素为单位，所以每个点都是非负整数。
四、绘制矩形Canvas只支持一种原生图形的绘制：矩形。
所有其他图形都至少需要生成一种路径。
Canvas提供了几种方式绘制矩形：
描述方法参数创建矩形rect(x y width height)x：矩形左上角X坐标
y：矩形左上角的Y坐标
width：矩形的宽度，以像素计
height：矩形的高度，以像素计
绘制一个填充颜色的矩形，默认黑色fillRect(x y width height)x：矩形左上角X坐标
y：矩形左上角的Y坐标
width：矩形的宽度，以像素计
height：矩形的高度，以像素计
绘制一个矩形边框，默认黑色strokeRect(x y width height)x：矩形左上角X坐标
y：矩形左上角的Y坐标
width：矩形的宽度，以像素计
height：矩形的高度，以像素计
在给定的矩形内清除指定的像素，然后这块区域变完全透明clearRect(x y width height)x：要清除的矩形左上角X坐标
y：要清除的矩形矩形左上角的Y坐标
width：要清除的矩形矩形的宽度，以像素计
height：要清除的矩形矩形的高度，以像素计
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>1.绘制矩形</title> <style> #canvas{ width: 500px; height: 200px; border: 1px solid red; } </style> </head> <body> <canvas id="canvas"></canvas> <script> window.onload = function () { var canvas = document.getElementById('canvas'); if (!canvas.getContext) return; var context = canvas.getContext('2d'); context.strokeRect(20 20 100 100); context.fillRect(30 30 80 80); context.clearRect(40 40 60 60); } </script> </body> </html>
图形的基本元素是路径。
路径通过不同颜色和宽度的线段、曲线相连形成不同形状的点集合。
一个路径，甚至一个子路径，都是闭合的。
步骤：
1. 创建路径起始点 -- beginPath()
2. 使用画图命令画出路径 -- moveTo()等
3. 路径封闭 -- closePath()
4. 一旦路径生成即可通过描边或填充路径来渲染图形 -- fill()
描述方法参数填充当前绘图fill()
绘制已定义的路径stroke()
起始一条路径，或重置当前当前路径beginPath()
把路径以定到画布指定点moveTo(x y)x：路径的目标位置的X坐标
y：路径的目标位置的Y坐标
创建从当前点到起始点的路径closePath()
添加一个新点，然后再画布中创建从该点到最后指定点的线条lineTo(x y)x：路径的目标位置的X坐标
y：路径的目标位置的Y坐标
从原始画布剪切任意形状和尺寸的区域clip()
创建二次贝赛尔曲线quadraticCurveTo(cpx cpy x y)cpx：贝塞尔控制点的X坐标
cpy：贝塞尔控制点的Y坐标
x：结束点的X坐标
y：结束点的Y坐标
创建三次贝塞尔曲线bezierCurveTo(cp1x cp1y cp2x cp2y x y)cp1x：第一个贝塞尔控制点的 x 坐标
cp1y：第一个贝塞尔控制点的 y 坐标
cp2x：第二个贝塞尔控制点的 x 坐标
cp2y：第二个贝塞尔控制点的 y坐标
x：结束点的 x 坐标
y：结束点的 y 坐标
创建弧、曲线（用于创建圆形或部分圆）arc(x y r sAngle eAngle counterclockwise)x：圆的中心的 x 坐标
y：圆的中心的 y 坐标
r：圆的半径
sAngle：起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）
eAngle：结束角，以弧度计
counterclockwise：可选，规定在逆时针还是在顺时针绘图，False = 顺时针，true = 逆时针
创建两切线之间的弧、曲线arcTo(x1 y1 x2 y2 r)x1：弧的起点的 x 坐标
y1：弧的起点的 y 坐标
x2：弧的终点的 x 坐标
y2：弧的终点的 y 坐标
r：弧的半径
如果指定的点位于当前路径中，则返回true 否则返回falseisPointInPath(x y)x：测试的 x 坐标
y：测试的 y 坐标
延伸：
一次贝塞尔曲线
二次贝塞尔曲线
转存失败
重新上传
取消
三次贝塞尔曲线
六、添加样式、颜色和阴影描述方法参数用于填充绘画的颜色、渐变或模式fillStylecolor|gradient|pattern
color：css颜色值
gradient：用于填充绘图的渐变对象（线性或放射性）
pattern：用于填充绘图的 pattern 对象
用于笔触的颜色、渐变或模式strokeStylecolor|gradient|pattern
color：css颜色值
gradient：用于填充绘图的渐变对象（线性或放射性）
pattern：用于填充绘图的 pattern 对象
用于阴影的颜色shadowColorcolor：css颜色值用于阴影的模糊级别shadowBlurnumber：模糊级别数阴影距形状的水平距离shadowOffsetXnumber：正值或负值，定义阴影与形状的水平距离阴影距形状的垂直距离shadowOffsetYnumber：正值或负值，定义阴影与形状的垂直距离
创建线性渐变createLinearGradient(x0 y0 x1 y1)x0：渐变开始点的 x 坐标 y0：渐变开始点的 y 坐标 x1：渐变结束点的 x 坐标 y1：渐变结束点的 y 坐标
在指定方向上重复指定的元素（元素可以是图片、视频，或者其他 <canvas> 元素）cratePattern(image "repeat|repeat-x|repeat-y|no-repeat")image：规定要使用的图片、画布或视频元素 "repeat：默认。该模式在水平和垂直方向重复 repeat-x：该模式只在水平方向重复 repeat-y：该模式只在垂直方向重复 no-repeat：该模式只显示一次（不重复） "
创建放射状、环形的渐变createRadialGradient(x0 y0 r0 x1 y1 r1)x0：渐变的开始圆的 x 坐标 y0：渐变的开始圆的 y 坐标 r0：开始圆的半径 x1：渐变的结束圆的 x 坐标 y1：渐变的结束圆的 y 坐标 r1：结束圆的半径
规定渐变对象中的颜色和停止位置addColorStop(stop color)stop：介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置
color： css 颜色值
线条的结束端点样式lineCap"butt|round|square"
"
butt：默认。向线条的每个末端添加平直的边缘
round：向线条的每个末端添加圆形线帽
square：向线条的每个末端添加正方形线帽
"
两条线相交时，所创建的拐角类型lineJoin"bevel|round|miter"
"
bevel：创建斜角
round：创建圆角
miter：默认。创建尖角
"
当前的线条宽度lineWidthnumber：当前线条的宽度，以像素计
最大的斜接长度miterLimitnumber：正数。规定最大斜接长度。
如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示
七、绘制文字描述方法参数当前字体属性font
当前对齐方式textAlign
当前文本基线textBaseline
在画布上绘制被填充的文本fillText()
在画布上绘制未被填充的文本strokeText()
返回包含指定文本宽度的对象measureText()
八、绘制图片描述方法参数在画布上绘制图像、画布或视频drawImageimg：规定要使用的图形、画布或视频
sx：可选，开始剪切的X坐标位置
sy：可选，开始剪切的Y坐标位置
swidth：可选，被剪切图形的宽度
sheight：可选，被剪切图形的高度
x：在画布上放置图形的X坐标位置
y：在画布上放置图形的Y坐标位置
width：可选，要使用的图形的宽度（伸展或缩小图像）
height：可选，要使用的图形的高度（伸展或缩小图像）
返回ImageData对象的宽度width
返回ImageData对象的高度height
返回一个对象，其包含指定的ImageData对象的图像数据data
创建新的、空白的ImageData对象crateImageData()
返回ImageData对象，该对象为画布上指定的矩形复制像素数据getImageData()
把图像数据（从指定的ImageData对象）放回画布上putImageData()
九、变形描述方法参数重新映射画布上的（0 0）位置translate()x：左右偏移量
y：上下偏移量
移动中心是坐标原点。
缩放当前绘图至更大或更小scale()scaleWIdth：缩放当前绘图宽度（1=100% 2=200%）
scaleHeight：缩放当前绘图高度（1=100% 2=200%）
旋转当前绘图rotate()angel：旋转角度，以弧度计，如需将角度转换为弧度，以degrees * Matn.PI/180公式计算。顺时针方向旋转，旋转中心是坐标原点。替换绘图的当前转换矩阵transform()a：水平缩放绘图
b：水平倾斜绘图
c：垂直倾斜绘图
d：垂直缩放绘图
e：水平移动绘图
f：垂直移动绘图
将当前转换重置为单位矩阵，然后运行transform()setTransform()a：水平旋转绘图
b：水平倾斜绘图
c：垂直倾斜绘图
d：垂直缩放绘图
e：水平移动绘图
f：垂直移动绘图
延伸：
1.translate：
2.rotate
转存失败
重新上传
取消
十、合成描述方法参数设置或返回绘图当前alpha或透明值globalAlphanumber：透明值，必须介于0.0-1.0之间设置或返回心图形如何绘制到已有的图像上globalCompositeOperation等多个属性操作，略。。
十一、其他描述方法参数保存当前环境的状态save()
返回之前报错过的路径状态和属性restore()
createEvent()
getContext()
toDataURL()
十二、动画基本步骤：
1. 在绘制每一帧动画之前，需要清空所有canvas -- clearRect()
2. 保存canvas状态
3. 绘制动画图形
4. 恢复canvas状态
