HTML5 canvas全解析
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
ctx.strokeStyle="rgb(200,0,0)"; ctx.fillStyle="rgb(255,0,0)"; ctx.shadowOffsetX=3; ctx.shadowOffsetY=3; ctx.shadowColor="rgba(150,0,0,0.2)"; ctx.shadowBlur=3; ctx.beginPath(); ctx.moveTo(75,60); ctx.bezierCurveTo(125,20,125,100,75,115); ctx.bezierCurveTo(25,100,25,20,75,60); ctx.stroke(); ctx.fill();
示例
下一页：canvas径向渐变
返回
HTML DOM createRadialGradient() 方法
定义和用法 createRadialGradient() 方法创建一条放射颜色渐变。 语法 createLinearGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)
*对照moveTo ,lineTo就相当于在刚刚提笔到的地方开始画一条线，这条线的结束点就 是（x，y），另外就是直线画到这里，当前画笔的位置就到了（x，y）这个点。后面 的画矩形就不是了。 示例
下一页：HTML DOM rect() 方法
返回
HTML DOM rect() 方法
定义和用法 rect() 方法为当前路径添加一条矩形子路径。 语法 quadraticCurveTo(x, y, width, height) 参数描述x, y矩形的左上角的坐标。width, height矩形的大 小。 描述 rect() 方法为路径添加了一个矩形。这个矩形是路径的一个子 路径并且没有和路径中的任何其他子路径相连。 *当 rect() 方法返回时，当前位置是 (0,0)。
Canvas基础
Canvas元素是HTML5中新增的一个重要元 素，专门用来绘制图形。在页面上放置一个 canvas元素就相当于在页面上放置了一块 “画布”，可以在其中进行图形的描绘。 Canvas的绘制需要通过JS编写在其中进行 绘画的脚本。
Canvas元素的基础知识
<canvas>看起来很像<img>，唯一不同就是它 不含 src 和 alt 属性。 它只有两个属性，width 和 height，两个都是可 选的，并且都可以 DOM 或者 CSS 来设置。 如果不指定width 和 height，默认的是宽300像 素，高150像素。 虽然可以通过 CSS 来调整canvas的大小，但渲染 图像会缩放来适应布局的 。 结束标签 </canvas> 是必须的
下一页：canvas径向渐变示例
canvas径向渐变示例
var radgrad = ctx.createRadialGradient(75,75,1, 75,75,60); <!--(圆一圆心x，圆一圆 心y，圆一半径，圆2圆心x，圆2圆心y， 圆2半径，)--> radgrad.addColorStop(0, '#A7D30C'); radgrad.addColorStop(0.9, '#019F62'); radgrad.addColorStop(1, 'rgba(1,159,98,0)'); ctx.fillStyle = radgrad; ctx.fillRect(0,0,150,150);
语法
window.moveTo(x,y)
参数描述
x窗口新位置的 x 坐标y窗口新位置的 y 坐标
*注：moveTo其实就相当于我们画图时提起画笔到画布的另一个地方，在这 个过程中我们并没有进行绘制路径。具体用的时候像：开始在哪画、画完一笔 之后再到哪里去画之类的用法。 下一页：HTML DOM lineTo() 方法
*注：beginPath和 closePath方法有时候即使不用也可以进行填充和描边， 但是如果不使用那么在最后填充的时候将把所有路径当做一个路径进行填充。 示例
下一页：HTML DOM moveTo() 方法
返回
HTML DOM moveTo() 方法
定义和用法
moveTo() 方法可把窗口的左上角移动到一个指定的 坐标。
HTML DOM lineTo() 方法
定义和用法 lineTo() 方法为当前子路径添 加一条直线。 语法 lineTo(x, y) 参数描述 x, y直线的终点的坐标。 描述 lineTo() 方法为当前子路径添 加一条直线。这条直线从 当前点开始，到 (x, y) 结 束。当方法返回时，当前 点是 (x,y)。
返回值 表示一个放射性颜色渐变的一个 CanvasGradient 对象。 描述 这个方法创建并返回了一个新的 CanvasGradient 对象，该对象在两个指定圆的圆周之间放射性地插值颜色。注意， 这个方法并没有指定任何用来渐变的颜色。使用返回对象的 addColorStop() 方法做到这一点。要使用一个渐变来勾 勒线条或填充区域，只需要把 CanvasGradient 对象赋给 strokeStyle 属性或 fillStyle 属性即可。 放射性渐变的绘制方法 使用第一个圆的圆周在偏移 0 处的颜色和第二个圆的圆周在偏移 1 处的颜色，在两个位置之间的圆上插入颜色值（红 色、绿色、蓝色和 alpha）。
ctx.beginPath(); ctx.moveTo(1,1); ctx.arc(50,50,30,0,Mat.PI*2,true); ctx.lineTo(150,150); ctx.closePath(); ctx.stroke(); /*这个例子中我们发现当用了moveTo之 后如果再用arc那么moveTo的点会 自动连接到圆的起点而lineTo则从圆 的终点开始，颠倒顺序后，lineTo的 终点又会自动连接到圆的起点*/
HTML5 Canvas
I. Canvas基础 II. 设置Canvas绘图 样式 III.canvas绘制图形 IV.Canvas引用图像 V. Canvas的画布处 理 VI.Canvas的图形组 合 VII.Canvas绘制文字 VIII.Canvas其他知 识
•保存与恢复 •保存文件 •获取像素信息 •基本动画
返回值 一个 CanvasRenderingContext2D 对象，使用它可以绘制到 Canvas 元素中。
描述 返回一个表示用来绘制的环境类型的环境。其本意是要为不同的绘制类型（2 维、3 维） 提供不同的环境。当前，唯一支持的是 "2d"，它返回一个 CanvasRenderingContext2D 对象，该对象实现了一个画布所使用的大多数方法。
下一页:canvas线性渐变示例
canvas线性渐变示例
function draw() { var cxt = document.getElementById('canvas').getContext('2d'); var grd=cxt.createLinearGradient(1,1,175,50); //(开始坐标x，开始坐标y，结束点X，结束点Y) grd.addColorStop(1,“#0000ff”);//addColorStop(offset, color)/*参数：百分比，颜色值*/ grd.addColorStop(0,"#00FF00"); cxt.fillStyle=grd; cxt.fillRect(1,1,175,50); }
模板JS
以下js是测试用的html文档中通用的，但是并不指必须如此Leabharlann Baidu
<script type="text/javascript"> function draw() { canvas = document.getElementById("canvas"); if (canvas.getContext) { //检测浏览器是否兼容 ctx = canvas.getContext("2d"); //你的canvas代码在这里 } //不兼容的代码 </script>
下一页：设置绘图样式
返回
设置绘图样式
填充样式
fillStyle()
颜色值支持半透明 具体请看示例
描边样式
strokeStyle()
颜色值支持半透明
设定线条样式
设定线宽 lineWidth() 设定图线帽样式 lineCap
'butt','round','square'
}
绘制图形
HTML DOM getContext() 方法
定义和用法 getContext() 方法返回一个用于在画布上绘图的环境。 语法 Canvas.getContext(contextID) 参数 参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 “2d”，它指 定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。 提示：在未来，如果 <canvas> 标签扩展到支持 3D 绘图，getContext() 方法可能 允许传递一个 “3d” 字符串参数。（即现在不仅能支持“2D”）。
放置Canvas
<style type="text/css"> .canvas { width:150px; height:150px;} canvas { border: 1px solid black;} </style>
<body onload="draw();"> <div class="canvas"> <canvas id="canvas" width="150" height="150"> <p>写在这里面的内容将展示给不兼容canvas的浏览器 </p> </canvas> </div> </body> 演示（canvas 基础测试模板2.html）
示例
下一页：绘制线性渐变
HTML DOM createLinearGradient() 方法
定义和用法 createLinearGradient() 方法创建一条线性颜色渐变。 语法 createLinearGradient(xStart, yStart, xEnd, yEnd)
这个方法创建并返回了一个新的 CanvasGradient 对象，它在指定的起始点 和结束点之间线性地内插颜色值。注意，这个方法并没有为渐变指定任何颜色。 使用返回对象的 addColorStop() 来做到这一点。要使用一个渐变来勾勒线条 或填充区域，只需要把 CanvasGradient 对象赋给 strokeStyle 属性或 fillStyle 属性即可。
下一页：canvas绘制图形
通过JS在画布上绘制图形
使用路径
beginPath() stopPath() moveTo() lineTo() 绘制矩形 Rect() fillRect() clearRect() 绘制圆形 arc() 绘制贝塞尔曲线
quadraticCurveTo() bezierCurveTo()
strokeRect()
Fill() strock()
使用图像
开始与闭合路径
beginPath()
该方法不使用参数。通过调用该方法，开始路径的创建。在几次循环地创建 路径的过程中，每次开始创建时都要调用beginPath函数
closePath()
如果当前子路径是打开的，就关闭它。路径创建完成后，使用图形上下文对 图像的closePath方法将路径关闭。将路径关闭后，路径的创建工作就完成 了，但是注意，这时只是路径创建完毕而已，还没有真正的绘制任何图形。
线的链接样式 lineJoin
'round','bevel','miter'
绘制渐变
绘制线性渐变 绘制径向渐变
下一页：绘制阴影
给图形绘制阴影
shadowOffsetX——阴影的横向移动 shadowOffsetY——阴影的纵向移动 shadowColor——阴影的颜色 shadowBlur——阴影的模糊范围
示例
下一页：canvas径向渐变
返回
HTML DOM createRadialGradient() 方法
定义和用法 createRadialGradient() 方法创建一条放射颜色渐变。 语法 createLinearGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)
*对照moveTo ,lineTo就相当于在刚刚提笔到的地方开始画一条线，这条线的结束点就 是（x，y），另外就是直线画到这里，当前画笔的位置就到了（x，y）这个点。后面 的画矩形就不是了。 示例
下一页：HTML DOM rect() 方法
返回
HTML DOM rect() 方法
定义和用法 rect() 方法为当前路径添加一条矩形子路径。 语法 quadraticCurveTo(x, y, width, height) 参数描述x, y矩形的左上角的坐标。width, height矩形的大 小。 描述 rect() 方法为路径添加了一个矩形。这个矩形是路径的一个子 路径并且没有和路径中的任何其他子路径相连。 *当 rect() 方法返回时，当前位置是 (0,0)。
Canvas基础
Canvas元素是HTML5中新增的一个重要元 素，专门用来绘制图形。在页面上放置一个 canvas元素就相当于在页面上放置了一块 “画布”，可以在其中进行图形的描绘。 Canvas的绘制需要通过JS编写在其中进行 绘画的脚本。
Canvas元素的基础知识
<canvas>看起来很像<img>，唯一不同就是它 不含 src 和 alt 属性。 它只有两个属性，width 和 height，两个都是可 选的，并且都可以 DOM 或者 CSS 来设置。 如果不指定width 和 height，默认的是宽300像 素，高150像素。 虽然可以通过 CSS 来调整canvas的大小，但渲染 图像会缩放来适应布局的 。 结束标签 </canvas> 是必须的
下一页：canvas径向渐变示例
canvas径向渐变示例
var radgrad = ctx.createRadialGradient(75,75,1, 75,75,60); <!--(圆一圆心x，圆一圆 心y，圆一半径，圆2圆心x，圆2圆心y， 圆2半径，)--> radgrad.addColorStop(0, '#A7D30C'); radgrad.addColorStop(0.9, '#019F62'); radgrad.addColorStop(1, 'rgba(1,159,98,0)'); ctx.fillStyle = radgrad; ctx.fillRect(0,0,150,150);
语法
window.moveTo(x,y)
参数描述
x窗口新位置的 x 坐标y窗口新位置的 y 坐标
*注：moveTo其实就相当于我们画图时提起画笔到画布的另一个地方，在这 个过程中我们并没有进行绘制路径。具体用的时候像：开始在哪画、画完一笔 之后再到哪里去画之类的用法。 下一页：HTML DOM lineTo() 方法
*注：beginPath和 closePath方法有时候即使不用也可以进行填充和描边， 但是如果不使用那么在最后填充的时候将把所有路径当做一个路径进行填充。 示例
下一页：HTML DOM moveTo() 方法
返回
HTML DOM moveTo() 方法
定义和用法
moveTo() 方法可把窗口的左上角移动到一个指定的 坐标。
HTML DOM lineTo() 方法
定义和用法 lineTo() 方法为当前子路径添 加一条直线。 语法 lineTo(x, y) 参数描述 x, y直线的终点的坐标。 描述 lineTo() 方法为当前子路径添 加一条直线。这条直线从 当前点开始，到 (x, y) 结 束。当方法返回时，当前 点是 (x,y)。
返回值 表示一个放射性颜色渐变的一个 CanvasGradient 对象。 描述 这个方法创建并返回了一个新的 CanvasGradient 对象，该对象在两个指定圆的圆周之间放射性地插值颜色。注意， 这个方法并没有指定任何用来渐变的颜色。使用返回对象的 addColorStop() 方法做到这一点。要使用一个渐变来勾 勒线条或填充区域，只需要把 CanvasGradient 对象赋给 strokeStyle 属性或 fillStyle 属性即可。 放射性渐变的绘制方法 使用第一个圆的圆周在偏移 0 处的颜色和第二个圆的圆周在偏移 1 处的颜色，在两个位置之间的圆上插入颜色值（红 色、绿色、蓝色和 alpha）。
ctx.beginPath(); ctx.moveTo(1,1); ctx.arc(50,50,30,0,Mat.PI*2,true); ctx.lineTo(150,150); ctx.closePath(); ctx.stroke(); /*这个例子中我们发现当用了moveTo之 后如果再用arc那么moveTo的点会 自动连接到圆的起点而lineTo则从圆 的终点开始，颠倒顺序后，lineTo的 终点又会自动连接到圆的起点*/
HTML5 Canvas
I. Canvas基础 II. 设置Canvas绘图 样式 III.canvas绘制图形 IV.Canvas引用图像 V. Canvas的画布处 理 VI.Canvas的图形组 合 VII.Canvas绘制文字 VIII.Canvas其他知 识
•保存与恢复 •保存文件 •获取像素信息 •基本动画
返回值 一个 CanvasRenderingContext2D 对象，使用它可以绘制到 Canvas 元素中。
描述 返回一个表示用来绘制的环境类型的环境。其本意是要为不同的绘制类型（2 维、3 维） 提供不同的环境。当前，唯一支持的是 "2d"，它返回一个 CanvasRenderingContext2D 对象，该对象实现了一个画布所使用的大多数方法。
下一页:canvas线性渐变示例
canvas线性渐变示例
function draw() { var cxt = document.getElementById('canvas').getContext('2d'); var grd=cxt.createLinearGradient(1,1,175,50); //(开始坐标x，开始坐标y，结束点X，结束点Y) grd.addColorStop(1,“#0000ff”);//addColorStop(offset, color)/*参数：百分比，颜色值*/ grd.addColorStop(0,"#00FF00"); cxt.fillStyle=grd; cxt.fillRect(1,1,175,50); }
模板JS
以下js是测试用的html文档中通用的，但是并不指必须如此Leabharlann Baidu
<script type="text/javascript"> function draw() { canvas = document.getElementById("canvas"); if (canvas.getContext) { //检测浏览器是否兼容 ctx = canvas.getContext("2d"); //你的canvas代码在这里 } //不兼容的代码 </script>
下一页：设置绘图样式
返回
设置绘图样式
填充样式
fillStyle()
颜色值支持半透明 具体请看示例
描边样式
strokeStyle()
颜色值支持半透明
设定线条样式
设定线宽 lineWidth() 设定图线帽样式 lineCap
'butt','round','square'
}
绘制图形
HTML DOM getContext() 方法
定义和用法 getContext() 方法返回一个用于在画布上绘图的环境。 语法 Canvas.getContext(contextID) 参数 参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 “2d”，它指 定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。 提示：在未来，如果 <canvas> 标签扩展到支持 3D 绘图，getContext() 方法可能 允许传递一个 “3d” 字符串参数。（即现在不仅能支持“2D”）。
放置Canvas
<style type="text/css"> .canvas { width:150px; height:150px;} canvas { border: 1px solid black;} </style>
<body onload="draw();"> <div class="canvas"> <canvas id="canvas" width="150" height="150"> <p>写在这里面的内容将展示给不兼容canvas的浏览器 </p> </canvas> </div> </body> 演示（canvas 基础测试模板2.html）
示例
下一页：绘制线性渐变
HTML DOM createLinearGradient() 方法
定义和用法 createLinearGradient() 方法创建一条线性颜色渐变。 语法 createLinearGradient(xStart, yStart, xEnd, yEnd)
这个方法创建并返回了一个新的 CanvasGradient 对象，它在指定的起始点 和结束点之间线性地内插颜色值。注意，这个方法并没有为渐变指定任何颜色。 使用返回对象的 addColorStop() 来做到这一点。要使用一个渐变来勾勒线条 或填充区域，只需要把 CanvasGradient 对象赋给 strokeStyle 属性或 fillStyle 属性即可。
下一页：canvas绘制图形
通过JS在画布上绘制图形
使用路径
beginPath() stopPath() moveTo() lineTo() 绘制矩形 Rect() fillRect() clearRect() 绘制圆形 arc() 绘制贝塞尔曲线
quadraticCurveTo() bezierCurveTo()
strokeRect()
Fill() strock()
使用图像
开始与闭合路径
beginPath()
该方法不使用参数。通过调用该方法，开始路径的创建。在几次循环地创建 路径的过程中，每次开始创建时都要调用beginPath函数
closePath()
如果当前子路径是打开的，就关闭它。路径创建完成后，使用图形上下文对 图像的closePath方法将路径关闭。将路径关闭后，路径的创建工作就完成 了，但是注意，这时只是路径创建完毕而已，还没有真正的绘制任何图形。
线的链接样式 lineJoin
'round','bevel','miter'
绘制渐变
绘制线性渐变 绘制径向渐变
下一页：绘制阴影
给图形绘制阴影
shadowOffsetX——阴影的横向移动 shadowOffsetY——阴影的纵向移动 shadowColor——阴影的颜色 shadowBlur——阴影的模糊范围