学习HTML5 Canvas这一篇文章就够了

jekeyhui99 发表于 2018-2-26 11:59:02

<h1 id="一canvas简介" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.6em; font-variant-numeric: normal; font-variant-east-asian: normal;">一、canvas简介</h1><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;"><canvas></code> 是 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">HTML5</code> 新增的，一个可以使用脚本(通常为<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">JavaScript</code>)在其中绘制图像的 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">HTML</code> 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 它最初由苹果内部使用自己<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">MacOS X WebKit</code>推出，供应用程序使用像仪表盘的构件和 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">Safari</code> 浏览器使用。后来，有人通过<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">Gecko</code>内核的浏览器 (尤其是<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">Mozilla</code>和<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">Firefox</code>)，<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">Opera</code>和<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">Chrome</code>和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">Canvas</code>是由<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">HTML</code>代码配合高度和宽度属性而定义出的可绘制区域。<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">JavaScript</code>代码可以访问该区域，类似于其他通用的二维<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">API</code>，通过一套完整的绘图函数来动态生成图形。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> Mozilla 程序从 Gecko 1.8 (Firefox 1.5)开始支持 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;"><canvas></code>, Internet Explorer 从IE9开始<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;"><canvas></code> 。Chrome和Opera 9+ 也支持<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;"><canvas></code>。<h1 id="二canvas基本使用" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.6em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t1" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>二、Canvas基本使用</h1><h2 id="21-canvas元素" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t2" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>2.1 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 31px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;"><canvas></code>元素</h2><pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-html hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;"><canvas id="tutorial" width="300" height="300"></canvas></code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li></ul></pre><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;"><canvas></code>看起来和<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;"><img></code>标签一样，只是 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;"><canvas></code> 只有两个可选的属性 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">width、heigth</code> 属性，而没有 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">src、alt</code> 属性。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 如果不给<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;"><canvas></code>设置<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">widht、height</code>属性时，则默认 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">width</code>为300、<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">height</code>为150,单位都是<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">px</code>。也可以使用<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">css</code>属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">css</code>属性来设置<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;"><canvas></code>的宽高。<h3 id="替换内容" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 1.7em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t3" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>替换内容</h3><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 由于某些较老的浏览器（尤其是IE9之前的IE浏览器）或者浏览器不支持HTML元素<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;"><canvas></code>，在这些浏览器上你应该总是能展示替代内容。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 支持<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;"><canvas></code>的浏览器会只渲染<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;"><canvas></code>标签，而忽略其中的替代内容。不支持 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;"><canvas></code> 的浏览器则会直接渲染替代内容。<blockquote style="box-sizing: border-box; margin-bottom: 1.7em; line-height: 27px; padding: 15px 20px; border-left: 10px solid rgba(128, 128, 128, 0.075); background-color: rgba(128, 128, 128, 0.047); border-radius: 0px 5px 5px 0px; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">用文本替换：</blockquote><pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-html hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;"><canvas>
你的浏览器不支持canvas,请升级你的浏览器
</canvas></code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">2</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">3</li></ul></pre><blockquote style="box-sizing: border-box; margin-bottom: 1.7em; line-height: 27px; padding: 15px 20px; border-left: 10px solid rgba(128, 128, 128, 0.075); background-color: rgba(128, 128, 128, 0.047); border-radius: 0px 5px 5px 0px; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">用 <code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 14px; color: rgb(63, 63, 63); background-color: rgba(128, 128, 128, 0.0745098); white-space: nowrap; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;"><img></code> 替换：</blockquote><pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-html hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;"><canvas>
<img src="./美女.jpg" alt="">
</canvas></code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">2</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">3</li></ul></pre><h3 id="结束标签canvas不可省" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 1.7em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t4" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>结束标签<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 24px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;"></canvas></code>不可省</h3><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">与 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;"><img></code>元素不同，<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;"><canvas></code>元素需要结束标签(<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;"></canvas></code>)。如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来。<h2 id="22-渲染上下文thre-rending-context" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t5" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>2.2 渲染上下文(Thre Rending Context)</h2><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;"><canvas></code>会创建一个固定大小的画布，会公开一个或多个 渲染上下文(画笔)，使用 渲染上下文来绘制和处理要展示的内容。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 我们重点研究 2D渲染上下文。其他的上下文我们暂不研究，比如， WebGL使用了基于OpenGL ES的3D上下文 (“experimental-webgl”) 。<pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-javascript hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;">var canvas = document.getElementById('tutorial');
//获得 2d 上下文对象
var ctx = canvas.getContext('2d');</code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">2</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">3</li></ul></pre><h2 id="23-检测支持性" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t6" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>2.3 检测支持性</h2><pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-javascript hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;">var canvas = document.getElementById('tutorial');

if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}</code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">2</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">3</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">4</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">5</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">6</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">7</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">8</li></ul></pre><h2 id="24-代码模板" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t7" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>2.4 代码模板</h2><pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-html hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;"><html>
<head>
<title>Canvas tutorial</title>
<style type="text/css">
 canvas {
 border: 1px solid black;
 }
</style>
</head>
<canvas id="tutorial" width="300" height="300"></canvas>
</body>
<script type="text/javascript">
function draw(){
 var canvas = document.getElementById('tutorial');
 if(!canvas.getContext) return;
 var ctx = canvas.getContext("2d");
 //开始代码

}
draw();
</script>
</html></code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">2</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">3</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">4</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">5</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">6</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">7</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">8</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">9</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">10</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">11</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">12</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">13</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">14</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">15</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">16</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">17</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">18</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">19</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">20</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">21</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">22</li></ul></pre><h2 id="25-一个简单的例子" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t8" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>2.5 一个简单的例子</h2><blockquote style="box-sizing: border-box; margin-bottom: 1.7em; line-height: 27px; padding: 15px 20px; border-left: 10px solid rgba(128, 128, 128, 0.075); background-color: rgba(128, 128, 128, 0.047); border-radius: 0px 5px 5px 0px; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">绘制两个长方形。</blockquote><pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-html hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;"><html>
<head>
<title>Canvas tutorial</title>
<style type="text/css">
 canvas {
 border: 1px solid black;
 }
</style>
</head>
<canvas id="tutorial" width="300" height="300"></canvas>
</body>
<script type="text/javascript">
function draw(){
 var canvas = document.getElementById('tutorial');
 if(!canvas.getContext) return;
 var ctx = canvas.getContext("2d");
 ctx.fillStyle = "rgb(200,0,0)";
 //绘制矩形
 ctx.fillRect (10, 10, 55, 50);

 ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
 ctx.fillRect (30, 30, 55, 50);
}
draw();
</script>
</html></code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">2</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">3</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">4</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">5</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">6</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">7</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">8</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">9</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">10</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">11</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">12</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">13</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">14</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">15</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">16</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">17</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">18</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">19</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">20</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">21</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">22</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">23</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">24</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">25</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">26</li></ul></pre><h1 id="三绘制形状" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.6em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t9" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>三、绘制形状</h1><h2 id="31-栅格grid和坐标空间" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t10" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>3.1 栅格<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 31px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">(grid)</code>和坐标空间</h2><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 如下图所示，<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">canvas</code>元素默认被网格所覆盖。通常来说网格中的一个单元相当于<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">canvas</code>元素中的一像素。栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点来定位。所以图中蓝色方形左上角的坐标为距离左边（X轴）x像素，距离上边（Y轴）y像素（坐标为（x,y））。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 后面我们会涉及到坐标原点的平移、网格的旋转以及缩放等。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="https://mdn.mozillademos.org/files/224/Canvas_default_grid.png" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h2 id="32-绘制矩形" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t11" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>3.2 绘制矩形</h2><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;"><canvas></code> 只支持一种原生的图形绘制：矩形。所有其他图形都至少需要生成一种路径(<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">path</code>)。不过，我们拥有众多路径生成的方法让复杂图形的绘制成为了可能。<blockquote style="box-sizing: border-box; margin-bottom: 1.7em; line-height: 27px; padding: 15px 20px; border-left: 10px solid rgba(128, 128, 128, 0.075); background-color: rgba(128, 128, 128, 0.047); border-radius: 0px 5px 5px 0px; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 14px; color: rgb(63, 63, 63); background-color: rgba(128, 128, 128, 0.0745098); white-space: nowrap; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;">canvas</code>t 提供了三种方法绘制矩形：</blockquote><ol style="box-sizing: border-box; line-height: 27px; margin-bottom: 1.7em; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">fillRect(x, y, width, height)</code>绘制一个填充的矩形</li><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">strockRect(x, y, width, height)</code>绘制一个矩形的边框</li><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">clearRect(x, y, widh, height)</code>清除指定的矩形区域，然后这块区域会变的完全透明。</li></ol><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">说明：<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 这3个方法具有相同的参数。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">x, y</code>：指的是矩形的左上角的坐标。(相对于<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">canvas</code>的坐标原点)<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">width, height</code>：指的是绘制的矩形的宽和高。<pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-javascript hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;">function draw(){
var canvas = document.getElementById('tutorial');
if(!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.fillRect(10, 10, 100, 50);//绘制矩形,填充的默认颜色为黑色
ctx.strokeRect(10, 70, 100, 50);//绘制矩形边框

}
draw();</code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">2</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">3</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">4</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">5</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">6</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">7</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">8</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">9</li></ul></pre><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-4/57498980.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-javascript hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;">ctx.clearRect(15, 15, 50, 25);</code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li></ul></pre><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-4/92358331.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h1 id="四绘制路径path" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.6em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t12" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>四、绘制路径(<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 37px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">path</code>)</h1><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 图形的基本元素是路径。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 一个路径，甚至一个子路径，都是闭合的。<blockquote style="box-sizing: border-box; margin-bottom: 1.7em; line-height: 27px; padding: 15px 20px; border-left: 10px solid rgba(128, 128, 128, 0.075); background-color: rgba(128, 128, 128, 0.047); border-radius: 0px 5px 5px 0px; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">使用路径绘制图形需要一些额外的步骤：</blockquote><ol style="box-sizing: border-box; line-height: 27px; margin-bottom: 1.7em; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><li style="box-sizing: border-box;">创建路径起始点</li><li style="box-sizing: border-box;">调用绘制方法去绘制出路径</li><li style="box-sizing: border-box;">把路径封闭</li><li style="box-sizing: border-box;">一旦路径生成，通过描边或填充路径区域来渲染图形。</li></ol><blockquote style="box-sizing: border-box; margin-bottom: 1.7em; line-height: 27px; padding: 15px 20px; border-left: 10px solid rgba(128, 128, 128, 0.075); background-color: rgba(128, 128, 128, 0.047); border-radius: 0px 5px 5px 0px; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">下面是需要用到的方法：</blockquote><ol style="box-sizing: border-box; line-height: 27px; margin-bottom: 1.7em; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">beginPath()</code>新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径</li><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">moveTo(x, y)</code>把画笔移动到指定的坐标<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">(x, y)</code>。相当于设置路径的起始点坐标。</li><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">closePath()</code>闭合路径之后，图形绘制命令又重新指向到上下文中</li><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">stroke()</code>通过线条来绘制图形轮廓</li><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">fill()</code>通过填充路径的内容区域生成实心的图形</li></ol><h2 id="41-绘制线段" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t13" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>4.1 绘制线段</h2><pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-javascript hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;">function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath(); //新建一条path
ctx.moveTo(50, 50); //把画笔移动到指定的坐标
ctx.lineTo(200, 50);//绘制一条从当前位置到指定坐标(200, 50)的直线.
//闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做
ctx.closePath();
ctx.stroke(); //绘制路径。
}
draw();</code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">2</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">3</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">4</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">5</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">6</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">7</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">8</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">9</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">10</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">11</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">12</li></ul></pre><h2 id="42-绘制三角形边框" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t14" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>4.2 绘制三角形边框</h2><pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-javascript hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;">function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.lineTo(200, 200);
ctx.closePath(); //虽然我们只绘制了两条线段，但是closePath会closePath，仍然是一个3角形
ctx.stroke(); //描边。stroke不会自动closePath()
}
draw();</code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">2</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">3</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">4</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">5</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">6</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">7</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">8</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">9</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">10</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">11</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">12</li></ul></pre><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-4/20099429.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h2 id="43-填充三角形" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t15" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>4.3 填充三角形</h2><pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-javascript hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;">function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.lineTo(200, 200);

ctx.fill(); //填充闭合区域。如果path没有闭合，则fill()会自动闭合路径。
}
draw();</code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">2</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">3</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">4</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">5</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">6</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">7</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">8</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">9</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">10</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">11</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">12</li></ul></pre><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-4/83072674.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h2 id="44-绘制圆弧" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t16" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>4.4 绘制圆弧</h2><blockquote style="box-sizing: border-box; margin-bottom: 1.7em; line-height: 27px; padding: 15px 20px; border-left: 10px solid rgba(128, 128, 128, 0.075); background-color: rgba(128, 128, 128, 0.047); border-radius: 0px 5px 5px 0px; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">有两个方法可以绘制圆弧：</blockquote><ol style="box-sizing: border-box; line-height: 27px; margin-bottom: 1.7em; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">arc(x, y, r, startAngle, endAngle, anticlockwise)</code>:以<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">(x, y)</code>为圆心，以<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">r</code>为半径，从 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">startAngle</code>弧度开始到<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">endAngle</code>弧度结束。<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">anticlosewise</code>是布尔值，<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">true</code>表示逆时针，<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">false</code>表示顺时针。(默认是顺时针)注意：<ol style="box-sizing: border-box; line-height: 27px; margin-bottom: 1.7em;"><li style="box-sizing: border-box;">这里的度数都是弧度。</li><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">0</code>弧度是指的<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">x</code>轴正方形</li></ol><pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px;"><code class="language-javascript hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;">radians=(Math.PI/180)*degrees //角度转换成弧度</code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li></ul></pre></li><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">arcTo(x1, y1, x2, y2, radius)</code>:根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点。</li></ol><h3 id="圆弧案例1" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 1.7em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t17" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>圆弧案例1：</h3><pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-javascript hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;">function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(50, 50, 40, 0, Math.PI / 2, false);
ctx.stroke();
}
draw();</code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">2</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">3</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">4</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">5</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">6</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">7</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">8</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">9</li></ul></pre><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-4/97210404.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h3 id="圆弧案例2" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 1.7em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t18" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>圆弧案例2：</h3><pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-javascript hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;">function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(50, 50, 40, 0, Math.PI / 2, false);
ctx.stroke();

ctx.beginPath();
ctx.arc(150, 50, 40, 0, -Math.PI / 2, true);
ctx.closePath();
ctx.stroke();

ctx.beginPath();
ctx.arc(50, 150, 40, -Math.PI / 2, Math.PI / 2, false);
ctx.fill();

ctx.beginPath();
ctx.arc(150, 150, 40, 0, Math.PI, false);
ctx.fill();

}
draw();</code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">2</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">3</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">4</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">5</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">6</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">7</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">8</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">9</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">10</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">11</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">12</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">13</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">14</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">15</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">16</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">17</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">18</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">19</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">20</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">21</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">22</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">23</li></ul></pre><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-4/62078705.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h3 id="圆弧案例3" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 1.7em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t19" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>圆弧案例3：</h3><pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-javascript hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;">function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 50);
//参数1、2：控制点1坐标参数3、4：控制点2坐标参数4：圆弧半径
ctx.arcTo(200, 50, 200, 200, 100);
ctx.lineTo(200, 200)
ctx.stroke();

ctx.beginPath();
ctx.rect(50, 50, 10, 10);
ctx.rect(200, 50, 10, 10)
ctx.rect(200, 200, 10, 10)
ctx.fill()
}
draw();</code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">2</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">3</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">4</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">5</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">6</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">7</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">8</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">9</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">10</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">11</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">12</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">13</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">14</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">15</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">16</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">17</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">18</li></ul></pre><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-4/95442248.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">arcTo</code>方法的说明：<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 这个方法可以这样理解。绘制的弧形是由两条切线所决定。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 第 1 条切线：起始点和控制点1决定的直线。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 第 2 条切线：控制点1 和控制点2决定的直线。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 其实绘制的圆弧就是与这两条直线相切的圆弧。<h2 id="45-绘制贝塞尔曲线" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t20" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>4.5 绘制贝塞尔曲线</h2><h3 id="451-什么是贝塞尔曲线" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 1.7em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t21" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>4.5.1 什么是贝塞尔曲线</h3><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较成熟的位图软件中也有贝塞尔曲线工具如PhotoShop等。在Flash4中还没有完整的曲线工具，而在Flash5里面已经提供出贝塞尔曲线工具。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 贝塞尔曲线于1962，由法国工程师皮埃尔·贝塞尔（Pierre Bézier）所广泛发表，他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由Paul de Casteljau于1959年运用de Casteljau演算法开发，以稳定数值的方法求出贝兹曲线。<h4 id="一次贝塞尔曲线线性贝塞尔曲线" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 1.25em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t22" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>一次贝塞尔曲线(线性贝塞尔曲线)</h4><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 一次贝塞尔曲线其实是一条直线。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-4/40655077.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h4 id="二次贝塞尔曲线" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 1.25em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t23" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>二次贝塞尔曲线</h4><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-4/94917354.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-4/35792129.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h4 id="三次贝塞尔曲线" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 1.25em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t24" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>三次贝塞尔曲线</h4><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-4/69159470.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-4/55999388.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h3 id="452-绘制贝塞尔曲线" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 1.7em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t25" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>4.5.2 绘制贝塞尔曲线</h3><h4 id="绘制二次贝塞尔曲线" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 1.25em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t26" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>绘制二次贝塞尔曲线</h4><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">quadraticCurveTo(cp1x, cp1y, x, y)</code>:<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">说明：<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 参数1和2：控制点坐标<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 参数3和4：结束点坐标<pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-javascript hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;">function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(10, 200); //起始点
var cp1x = 40, cp1y = 100;//控制点
var x = 200, y = 200; // 结束点
//绘制二次贝塞尔曲线
ctx.quadraticCurveTo(cp1x, cp1y, x, y);
ctx.stroke();

ctx.beginPath();
ctx.rect(10, 200, 10, 10);
ctx.rect(cp1x, cp1y, 10, 10);
ctx.rect(x, y, 10, 10);
ctx.fill();

}
draw();</code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">2</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">3</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">4</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">5</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">6</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">7</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">8</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">9</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">10</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">11</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">12</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">13</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">14</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">15</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">16</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">17</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">18</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">19</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">20</li></ul></pre><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-4/31012258.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h4 id="绘制三次贝塞尔曲线" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 1.25em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t27" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>绘制三次贝塞尔曲线</h4><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)</code>：<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">说明：<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 参数1和2：控制点1的坐标<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 参数3和4：控制点2的坐标<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 参数5和6：结束点的坐标<pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-javascript hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;">function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(40, 200); //起始点
var cp1x = 20, cp1y = 100;//控制点1
var cp2x = 100, cp2y = 120;//控制点2
var x = 200, y = 200; // 结束点
//绘制二次贝塞尔曲线
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
ctx.stroke();

ctx.beginPath();
ctx.rect(40, 200, 10, 10);
ctx.rect(cp1x, cp1y, 10, 10);
ctx.rect(cp2x, cp2y, 10, 10);
ctx.rect(x, y, 10, 10);
ctx.fill();

}
draw();</code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">2</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">3</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">4</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">5</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">6</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">7</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">8</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">9</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">10</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">11</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">12</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">13</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">14</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">15</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">16</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">17</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">18</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">19</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">20</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">21</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">22</li></ul></pre><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-4/18941618.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;">

jekeyhui99 发表于 2018-2-26 12:13:32

转自：<a href="http://blog.csdn.net/u012468376/article/details/73350998" style="text-decoration-line: none; font-family: "microsoft yahei"; font-size: 14px; font-variant-numeric: normal; font-variant-east-asian: normal; line-height: 14px; color: rgb(102, 102, 102);">http://blog.csdn.net/u012468376/article/details/73350998</a><div><h1 id="五添加样式和颜色" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.6em; font-variant-numeric: normal; font-variant-east-asian: normal;">五、添加样式和颜色</h1><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 在前面的绘制矩形章节中，只用到了默认的线条和颜色。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 如果想要给图形上色，有两个重要的属性可以做到。<ol style="box-sizing: border-box; line-height: 27px; margin-bottom: 1.7em; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">fillStyle = color</code>设置图形的填充颜色</li><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">strokeStyle = color</code>设置图形轮廓的颜色</li></ol><blockquote style="box-sizing: border-box; margin-bottom: 1.7em; line-height: 27px; padding: 15px 20px; border-left: 10px solid rgba(128, 128, 128, 0.075); background-color: rgba(128, 128, 128, 0.047); border-radius: 0px 5px 5px 0px; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">备注：</blockquote><pre style="white-space: pre-wrap; box-sizing: border-box; margin-bottom: 10.5px; line-height: 1.45; font-family: "Source Code Pro", monospace; padding: 10px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 1px solid rgba(128, 128, 128, 0.075); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; color: inherit; background-color: transparent; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;">1. `color` 可以是表示 `css` 颜色值的字符串、渐变对象或者图案对象。
2. 默认情况下，线条和填充颜色都是黑色。
3. 一旦您设置了 `strokeStyle` 或者 `fillStyle` 的值，那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色，你需要重新设置 `fillStyle` 或 `strokeStyle` 的值。
</code></pre><h2 id="fillstyle" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t29" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 31px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">fillStyle</code></h2><pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-javascript hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;">function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
for (var i = 0; i < 6; i++){
for (var j = 0; j < 6; j++){
 ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' +
 Math.floor(255 - 42.5 * j) + ',0)';
 ctx.fillRect(j * 50, i * 50, 50, 50);
}
}
}
draw();</code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">2</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">3</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">4</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">5</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">6</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">7</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">8</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">9</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">10</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">11</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">12</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">13</li></ul></pre><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-4/90462466.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h2 id="strokestyle" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t30" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 31px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">strokeStyle</code></h2><pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-javascript hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;"><script type="text/javascript">
function draw(){
 var canvas = document.getElementById('tutorial');
 if (!canvas.getContext) return;
 var ctx = canvas.getContext("2d");
 for (var i = 0; i < 6; i++){
 for (var j = 0; j < 6; j++){
 ctx.strokeStyle = `rgb(${randomInt(0, 255)},${randomInt(0, 255)},${randomInt(0, 255)})`;
 ctx.strokeRect(j * 50, i * 50, 40, 40);
 }
 }
}
draw();
/**
作者:李振超 4 Jun 2017 12:12
返回随机的之间的整数(包括from，也包括to)
*/
function randomInt(from, to){
 return parseInt(Math.random() * (to - from + 1) + from);
}

</script></code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">2</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">3</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">4</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">5</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">6</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">7</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">8</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">9</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">10</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">11</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">12</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">13</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">14</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">15</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">16</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">17</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">18</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">19</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">20</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">21</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">22</li></ul></pre><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-4/39824191.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h2 id="transparency透明度" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t31" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 31px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">Transparency(透明度)</code></h2><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">globalAlpha = transparencyValue</code><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 这个属性影响到 canvas 里所有图形的透明度，有效的值范围是 0.0 （完全透明）到 1.0（完全不透明），默认是 1.0。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">globalAlpha</code> 属性在需要绘制大量拥有相同透明度的图形时候相当高效。不过，我认为使用<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">rgba()</code>设置透明度更加好一些。<h2 id="line-style" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t32" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 31px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">line style</code></h2><h3 id="1-linewidth-value" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 1.7em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t33" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>1. <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 24px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">lineWidth = value</code></h3><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">线宽。只能是正值。默认是<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">1.0</code>。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">起始点和终点的连线为中心，上下各占线宽的一半<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">“`javascript  ctx.beginPath();  ctx.moveTo(10, 10);  ctx.lineTo(100, 10);  ctx.lineWidth = 10;  ctx.stroke();<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">ctx.beginPath();  ctx.moveTo(110, 10);  ctx.lineTo(160, 10)  ctx.lineWidth = 20;  ctx.stroke()  “`<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-4/29873575.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h3 id="2-linecap-type" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 1.7em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t34" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>2. <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 24px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">lineCap = type</code></h3><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">线条末端样式。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">共有3个值：<ol style="box-sizing: border-box; line-height: 27px; margin-bottom: 1.7em; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">butt</code>：线段末端以方形结束</li><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">round</code>：线段末端以圆形结束</li><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">square</code>：线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。<pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px;"><code class="language-javascript hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;">var lineCaps = ["butt", "round", "square"];

for (var i = 0; i < 3; i++){
ctx.beginPath();
ctx.moveTo(20 + 30 * i, 30);
ctx.lineTo(20 + 30 * i, 100);
ctx.lineWidth = 20;
ctx.lineCap = lineCaps;
ctx.stroke();
}

ctx.beginPath();
ctx.moveTo(0, 30);
ctx.lineTo(300, 30);

ctx.moveTo(0, 100);
ctx.lineTo(300, 100)

ctx.strokeStyle = "red";
ctx.lineWidth = 1;
ctx.stroke();</code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">2</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">3</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">4</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">5</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">6</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">7</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">8</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">9</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">10</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">11</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">12</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">13</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">14</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">15</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">16</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">17</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">18</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">19</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">20</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">21</li></ul></pre><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-4/41486892.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"></li></ol><h3 id="3-linejoin-type" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 1.7em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t35" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>3. <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 24px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">lineJoin = type</code></h3><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">同一个path内，设定线条与线条间接合处的样式。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">共有3个值<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">round</code>, <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">bevel</code> 和 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">miter</code>：<ol style="box-sizing: border-box; line-height: 27px; margin-bottom: 1.7em; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">round</code>通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。圆角的半径是线段的宽度。</li><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">bevel</code>在相连部分的末端填充一个额外的以三角形为底的区域，每个部分都有各自独立的矩形拐角。</li><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">miter</code>(默认)通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。</li></ol><pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-javascript hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;">function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");

var lineJoin = ['round', 'bevel', 'miter'];
ctx.lineWidth = 20;

for (var i = 0; i < lineJoin.length; i++){
 ctx.lineJoin = lineJoin;
 ctx.beginPath();
 ctx.moveTo(50, 50 + i * 50);
 ctx.lineTo(100, 100 + i * 50);
 ctx.lineTo(150, 50 + i * 50);
 ctx.lineTo(200, 100 + i * 50);
 ctx.lineTo(250, 50 + i * 50);
 ctx.stroke();
}

}
draw();</code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">2</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">3</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">4</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">5</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">6</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">7</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">8</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">9</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">10</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">11</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">12</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">13</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">14</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">15</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">16</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">17</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">18</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">19</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">20</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">21</li></ul></pre><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-5/5058353.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h3 id="4-虚线" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 1.7em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t36" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>4. 虚线</h3><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">用 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">setLineDash</code> 方法和 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">lineDashOffset</code> 属性来制定虚线样式. <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">setLineDash</code> 方法接受一个数组，来指定线段与间隙的交替；<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">lineDashOffset</code>属性设置起始偏移量.<pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-javascript hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;">function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");

ctx.setLineDash([20, 5]);// [实线长度, 间隙长度]
ctx.lineDashOffset = -0;
ctx.strokeRect(50, 50, 210, 210);
}
draw();</code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">2</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">3</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">4</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">5</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">6</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">7</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">8</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">9</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">10</li></ul></pre><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-5/92471191.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">备注：<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">getLineDash()</code>:返回一个包含当前虚线样式，长度为非负偶数的数组。<h1 id="六绘制文本" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.6em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t37" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>六、绘制文本</h1><h2 id="绘制文本的两个方法" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t38" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>绘制文本的两个方法</h2><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">canvas 提供了两种方法来渲染文本:<ol style="box-sizing: border-box; line-height: 27px; margin-bottom: 1.7em; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">fillText(text, x, y [, maxWidth])</code>在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.</li><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">strokeText(text, x, y [, maxWidth])</code>在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.</li></ol><pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-javascript hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;">var ctx;
function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
ctx = canvas.getContext("2d");
ctx.font = "100px sans-serif"
ctx.fillText("天若有情", 10, 100);
ctx.strokeText("天若有情", 10, 200)
}
draw();</code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">2</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">3</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">4</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">5</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">6</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">7</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">8</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">9</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">10</li></ul></pre><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-6/87968030.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h2 id="给文本添加样式" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t39" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>给文本添加样式</h2><ol style="box-sizing: border-box; line-height: 27px; margin-bottom: 1.7em; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">font = value</code>当前我们用来绘制文本的样式。这个字符串使用和 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">CSS font</code>属性相同的语法. 默认的字体是 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">10px sans-serif</code>。</li><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">textAlign = value</code>文本对齐选项. 可选的值包括：<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">start</code>, <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">end</code>, <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">left</code>, <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">right</code> or <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">center</code>. 默认值是 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">start</code>。</li><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">textBaseline = value</code>基线对齐选项，可选的值包括：<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">top</code>, <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">hanging</code>, <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">middle</code>, <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">alphabetic</code>, <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">ideographic</code>, <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">bottom</code>。默认值是 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">alphabetic。</code></li><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">direction = value</code>文本方向。可能的值包括：<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">ltr</code>, <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">rtl</code>, <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">inherit</code>。默认值是 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">inherit。</code></li></ol><h1 id="七绘制图片" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.6em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t40" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>七、绘制图片</h1><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 我们也可以在<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">canvas</code>上直接绘制图片。<h2 id="71-由零开始创建图片" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t41" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>7.1 由零开始创建图片</h2><h3 id="创建img元素" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 1.7em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t42" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>创建<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 24px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;"><img></code>元素</h3><pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-javascript hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;">var img = new Image(); // 创建一个<img>元素
img.src = 'myImage.png'; // 设置图片源地址</code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">2</li></ul></pre><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">脚本执行后图片开始装载<h3 id="绘制img" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 1.7em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t43" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>绘制<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 24px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">img</code></h3><pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-javascript hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;">//参数1：要绘制的img参数2、3：绘制的img在canvas中的坐标
ctx.drawImage(img,0,0); </code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">2</li></ul></pre><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">注意：<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 考虑到图片是从网络加载，如果 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">drawImage</code> 的时候图片还没有完全加载完成，则什么都不做，个别浏览器会抛异常。所以我们应该保证在 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">img</code> 绘制完成之后再 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">drawImage</code>。<pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-javascript hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;">var img = new Image(); // 创建img元素
img.onload = function(){
ctx.drawImage(img, 0, 0)
}
img.src = 'myImage.png'; // 设置图片源地址</code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">2</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">3</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">4</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">5</li></ul></pre><h2 id="72-绘制-img-标签元素中的图片" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t44" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>7.2 绘制 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 31px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">img</code> 标签元素中的图片</h2><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">img</code> 可以 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">new</code> 也可以来源于我们页面的 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;"><img></code>标签<pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-javascript hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;"><img src="./美女.jpg" alt="" width="300"><br>
<canvas id="tutorial" width="600" height="400"></canvas>
<script type="text/javascript">
function draw(){
 var canvas = document.getElementById('tutorial');
 if (!canvas.getContext) return;
 var ctx = canvas.getContext("2d");
 var img = document.querySelector("img");
 ctx.drawImage(img, 0, 0);
}
document.querySelector("img").onclick = function (){
 draw();
}

</script></code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">2</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">3</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">4</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">5</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">6</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">7</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">8</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">9</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">10</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">11</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">12</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">13</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">14</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">15</li></ul></pre><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">第一张图片就是页面中的<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;"><img></code>标签<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-6/84133001.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h2 id="73-缩放图片" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t45" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>7.3 缩放图片</h2><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">drawImage()</code> 也可以再添加两个参数：<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">drawImage(image, x, y, width, height)</code><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 这个方法多了2个参数：<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">width</code> 和 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">height，</code>这两个参数用来控制当像canvas画入时应该缩放的大小。<pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-javascript hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;">ctx.drawImage(img, 0, 0, 400, 200)</code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li></ul></pre><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-9/14522939.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h2 id="74-切片slice" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t46" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>7.4 切片(<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 31px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">slice</code>)</h2><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)</code><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">其他8个参数：<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 前4个是定义图像源的切片位置和大小，<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 后4个则是定义切片的目标显示位置和大小。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-9/86448348.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h1 id="八状态的保存和恢复" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.6em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t47" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>八、状态的保存和恢复</h1><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">Saving and restoring state</code>是绘制复杂图形时必不可少的操作。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">save()和restore()</code><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">save</code> 和 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">restore</code> 方法是用来保存和恢复 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">canvas</code> 状态的，都没有参数。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">Canvas</code> 的状态就是当前画面应用的所有样式和变形的一个快照。<ol style="box-sizing: border-box; line-height: 27px; margin-bottom: 1.7em; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><li style="box-sizing: border-box;">关于 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">save()</code>Canvas状态存储在栈中，每当<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">save()</code>方法被调用后，当前的状态就被推送到栈中保存。一个绘画状态包括：<ul style="box-sizing: border-box; line-height: 27px; margin-bottom: 1.7em;"><li style="box-sizing: border-box;">当前应用的变形（即移动，旋转和缩放）</li><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">strokeStyle</code>, <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">fillStyle</code>, <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">globalAlpha</code>, <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">lineWidth</code>, <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">lineCap</code>, <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">lineJoin</code>, <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">miterLimit</code>, <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">shadowOffsetX</code>, <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">shadowOffsetY</code>,<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">shadowBlur</code>, <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">shadowColor</code>, <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">globalCompositeOperation 的值</code></li><li style="box-sizing: border-box;">当前的裁切路径（<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">clipping path</code>）</li></ul>可以调用任意多次 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">save</code>方法。(类似数组的<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">push()</code>)</li><li style="box-sizing: border-box;">关于<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">restore()</code>每一次调用 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">restore</code> 方法，上一个保存的状态就从栈中弹出，所有设定都恢复。(类似数组的<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">pop()</code>)</li></ol><pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-javascript hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;">var ctx;
function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");

ctx.fillRect(0, 0, 150, 150); // 使用默认设置绘制一个矩形
ctx.save(); // 保存默认状态

ctx.fillStyle = 'red' // 在原有配置基础上对颜色做改变
ctx.fillRect(15, 15, 120, 120); // 使用新的设置绘制一个矩形

ctx.save(); // 保存当前状态
ctx.fillStyle = '#FFF' // 再次改变颜色配置
ctx.fillRect(30, 30, 90, 90); // 使用新的配置绘制一个矩形

ctx.restore(); // 重新加载之前的颜色状态
ctx.fillRect(45, 45, 60, 60); // 使用上一次的配置绘制一个矩形

ctx.restore(); // 加载默认颜色配置
ctx.fillRect(60, 60, 30, 30); // 使用加载的配置绘制一个矩形
}
draw();</code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">2</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">3</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">4</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">5</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">6</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">7</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">8</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">9</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">10</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">11</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">12</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">13</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">14</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">15</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">16</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">17</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">18</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">19</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">20</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">21</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">22</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">23</li></ul></pre><h1 id="九变形" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.6em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t48" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>九、变形</h1><h2 id="91-translate" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t49" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>9.1 translate</h2><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">translate(x, y)</code><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 用来移动 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">canvas</code> 的原点到指定的位置<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">translate</code>方法接受两个参数。<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">x</code> 是左右偏移量，<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">y</code> 是上下偏移量，如右图所示。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">在做变形之前先保存状态是一个良好的习惯。大多数情况下，调用 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">restore</code> 方法比手动恢复原先的状态要简单得多。又如果你是在一个循环中做位移但没有保存和恢复<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">canvas</code> 的状态，很可能到最后会发现怎么有些东西不见了，那是因为它很可能已经超出 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">canvas</code> 范围以外了。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 注意：<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">translate</code>移动的是<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">canvas</code>的坐标原点。(坐标变换)<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> <img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-10/83770925.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-javascript hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;">var ctx;
function draw(){
var canvas = document.getElementById('tutorial1');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.save(); //保存坐原点平移之前的状态
ctx.translate(100, 100);
ctx.strokeRect(0, 0, 100, 100)
ctx.restore(); //恢复到最初状态
ctx.translate(220, 220);
ctx.fillRect(0, 0, 100, 100)
}
draw();</code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">2</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">3</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">4</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">5</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">6</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">7</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">8</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">9</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">10</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">11</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">12</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">13</li></ul></pre><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-10/36692804.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h2 id="92-rotate" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t50" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>9.2 rotate</h2><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">rotate(angle)</code><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 旋转坐标轴。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 这个方法只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 旋转的中心是坐标原点。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-10/37980271.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-javascript hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;">var ctx;
function draw(){
var canvas = document.getElementById('tutorial1');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");

ctx.fillStyle = "red";
ctx.save();

ctx.translate(100, 100);
ctx.rotate(Math.PI / 180 * 45);
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 100, 100);
ctx.restore();

ctx.save();
ctx.translate(0, 0);
ctx.fillRect(0, 0, 50, 50)
ctx.restore();
}
draw();</code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">2</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">3</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">4</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">5</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">6</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">7</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">8</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">9</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">10</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">11</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">12</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">13</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">14</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">15</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">16</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">17</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">18</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">19</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">20</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">21</li></ul></pre><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-10/40328613.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h2 id="93-scale" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t51" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>9.3 scale</h2><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">scale(x, y)</code><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 我们用它来增减图形在 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">canvas</code> 中的像素数目，对形状，位图进行缩小或者放大。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">scale</code>方法接受两个参数。<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">x,y</code>分别是横轴和纵轴的缩放因子，它们都必须是正值。值比 1.0 小表示缩小，比 1.0 大则表示放大，值为 1.0 时什么效果都没有。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 默认情况下，<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">canvas</code> 的 1 单位就是 1 个像素。举例说，如果我们设置缩放因子是 0.5，1 个单位就变成对应 0.5 个像素，这样绘制出来的形状就会是原先的一半。同理，设置为 2.0 时，1 个单位就对应变成了 2 像素，绘制的结果就是图形放大了 2 倍。<h2 id="94-transform变形矩阵" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t52" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>9.4 transform(变形矩阵)</h2><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">transform(a, b, c, d, e, f)</code><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-10/89391901.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">a (m11)</code><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> Horizontal scaling.<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">b (m12)</code><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> Horizontal skewing.<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">c (m21)</code><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> Vertical skewing.<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">d (m22)</code><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> Vertical scaling.<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">e (dx)</code><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> Horizontal moving.<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">f (dy)</code><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> Vertical moving.<pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-javascript hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;">var ctx;
function draw(){
var canvas = document.getElementById('tutorial1');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.transform(1, 1, 0, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);
}
draw();</code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">2</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">3</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">4</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">5</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">6</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">7</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">8</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">9</li></ul></pre><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-10/15535750.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h1 id="十合成" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.6em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t53" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>十、合成</h1><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 在前面的所有例子中、，我们总是将一个图形画在另一个之上，对于其他更多的情况，仅仅这样是远远不够的。比如，对合成的图形来说，绘制顺序会有限制。不过，我们可以利用 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">globalCompositeOperation</code> 属性来改变这种状况。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">globalCompositeOperation = type</code><pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-javascript hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;"> var ctx;
function draw(){
 var canvas = document.getElementById('tutorial1');
 if (!canvas.getContext) return;
 var ctx = canvas.getContext("2d");

 ctx.fillStyle = "blue";
 ctx.fillRect(0, 0, 200, 200);

 ctx.globalCompositeOperation = "source-over"; //全局合成操作
 ctx.fillStyle = "red";
 ctx.fillRect(100, 100, 200, 200);
}
draw();

</script></code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">2</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">3</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">4</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">5</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">6</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">7</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">8</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">9</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">10</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">11</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">12</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">13</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">14</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">15</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">16</li></ul></pre><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">注：下面的展示中，蓝色是原有的，红色是新的。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">type `是下面 13 种字符串值之一：<h2 id="1-source-overdefault" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t54" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>1. <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 31px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">source-over(default)</code></h2><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">这是默认设置，新图像会覆盖在原有图像。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-10/15850624.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h2 id="2-source-in" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t55" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>2. <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 31px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">source-in</code></h2><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">仅仅会出现新图像与原来图像重叠的部分，其他区域都变成透明的。(包括其他的老图像区域也会透明)<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-10/37411043.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h2 id="3-source-out" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t56" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>3. <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 31px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">source-out</code></h2><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">仅仅显示新图像与老图像没有重叠的部分，其余部分全部透明。(老图像也不显示)<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-10/41781103.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h2 id="4-source-atop" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t57" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>4. <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 31px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">source-atop</code></h2><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">新图像仅仅显示与老图像重叠区域。老图像仍然可以显示。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-10/29772191.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h2 id="5-destination-over" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t58" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>5. <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 31px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">destination-over</code></h2><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">新图像会在老图像的下面。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-10/23645788.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h2 id="6-destination-in" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t59" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>6. <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 31px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">destination-in</code></h2><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">仅仅新老图像重叠部分的老图像被显示，其他区域全部透明。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-10/78166139.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h2 id="7-destination-out" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t60" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>7. <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 31px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">destination-out</code></h2><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">仅仅老图像与新图像没有重叠的部分。注意显示的是老图像的部分区域。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-10/27996302.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h2 id="8-destination-atop" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t61" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>8. <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 31px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">destination-atop</code></h2><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">老图像仅仅仅仅显示重叠部分，新图像会显示在老图像的下面。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-10/73933570.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h2 id="9-lighter" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t62" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>9. <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 31px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">lighter</code></h2><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">新老图像都显示，但是重叠区域的颜色做加处理<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-10/65148759.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h2 id="10-darken" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t63" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>10. <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 31px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">darken</code></h2><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">保留重叠部分最黑的像素。(每个颜色位进行比较，得到最小的)<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">blue: #0000ff</code><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">red: #ff0000</code><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">所以重叠部分的颜色：<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">#000000</code><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-10/88895274.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h2 id="11-lighten" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t64" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>11. <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 31px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">lighten</code></h2><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">保证重叠部分最量的像素。(每个颜色位进行比较，得到最大的)<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">blue: #0000ff</code><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">red: #ff0000</code><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">所以重叠部分的颜色：<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">#ff00ff</code><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-10/21148678.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h2 id="12-xor" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t65" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>12. <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 31px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">xor</code></h2><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">重叠部分会变成透明<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-10/44617053.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h2 id="13-copy" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t66" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>13. <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 31px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">copy</code></h2><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">只有新图像会被保留，其余的全部被清除(边透明)<img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-10/11205920.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h1 id="十一裁剪路径" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.6em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t67" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>十一、裁剪路径</h1><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">clip()</code><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 把已经创建的路径转换成裁剪路径。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 裁剪路径的作用是遮罩。只显示裁剪路径内的区域，裁剪路径外的区域会被隐藏。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"> 注意：<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">clip()</code>只能遮罩在这个方法调用之后绘制的图像，如果是<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">clip()</code>方法调用之前绘制的图像，则无法实现遮罩。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-10/53022912.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-javascript hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;">var ctx;
function draw(){
var canvas = document.getElementById('tutorial1');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(20,20, 100, 0, Math.PI * 2);
ctx.clip();

ctx.fillStyle = "pink";
ctx.fillRect(20, 20, 100,100);
}
draw();</code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">2</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">3</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">4</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">5</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">6</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">7</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">8</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">9</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">10</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">11</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">12</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">13</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">14</li></ul></pre><h1 id="十二动画" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.6em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t68" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>十二、动画</h1><h2 id="动画的基本步骤" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t69" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>动画的基本步骤</h2><ol style="box-sizing: border-box; line-height: 27px; margin-bottom: 1.7em; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><li style="box-sizing: border-box;">清空<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">canvas</code>再绘制每一帧动画之前，需要清空所有。清空所有最简单的做法就是<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">clearRect()</code>方法</li><li style="box-sizing: border-box;">保存<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">canvas</code>状态如果在绘制的过程中会更改<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">canvas</code>的状态(颜色、移动了坐标原点等),又在绘制每一帧时都是原始状态的话，则最好保存下<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">canvas</code>的状态</li><li style="box-sizing: border-box;">绘制动画图形这一步才是真正的绘制动画帧</li><li style="box-sizing: border-box;">恢复<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">canvas</code>状态如果你前面保存了<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">canvas</code>状态，则应该在绘制完成一帧之后恢复<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">canvas</code>状态。</li></ol><h2 id="控制动画" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t70" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>控制动画</h2><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">我们可用通过<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">canvas</code>的方法或者自定义的方法把图像会知道到<code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">canvas</code>上。正常情况，我们能看到绘制的结果是在脚本执行结束之后。例如，我们不可能在一个 <code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">for</code> 循环内部完成动画。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">也就是，为了执行动画，我们需要一些可以定时执行重绘的方法。<p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;">一般用到下面三个方法：<ol style="box-sizing: border-box; line-height: 27px; margin-bottom: 1.7em; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">setInterval()</code></li><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">setTimeout()</code></li><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: "Source Code Pro", monospace; padding: 2px 4px; font-size: 14px; background-color: rgba(128, 128, 128, 0.075); white-space: nowrap; border-radius: 0px;">requestAnimationFrame()</code></li></ol><h2 id="案例1太阳系" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t71" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>案例1：太阳系</h2><pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-javascript hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;">let sun;
let earth;
let moon;
let ctx;
function init(){
sun = new Image();
earth = new Image();
moon = new Image();
sun.src = "sun.png";
earth.src = "earth.png";
moon.src = "moon.png";

let canvas = document.querySelector("#solar");
ctx = canvas.getContext("2d");

sun.onload = function (){
 draw()
}

}
init();
function draw(){
ctx.clearRect(0, 0, 300, 300); //清空所有的内容
/*绘制太阳*/
ctx.drawImage(sun, 0, 0, 300, 300);

ctx.save();
ctx.translate(150, 150);

//绘制earth轨道
ctx.beginPath();
ctx.strokeStyle = "rgba(255,255,0,0.5)";
ctx.arc(0, 0, 100, 0, 2 * Math.PI)
ctx.stroke()

let time = new Date();
//绘制地球
ctx.rotate(2 * Math.PI / 60 * time.getSeconds() + 2 * Math.PI / 60000 * time.getMilliseconds())
ctx.translate(100, 0);
ctx.drawImage(earth, -12, -12)

//绘制月球轨道
ctx.beginPath();
ctx.strokeStyle = "rgba(255,255,255,.3)";
ctx.arc(0, 0, 40, 0, 2 * Math.PI);
ctx.stroke();

//绘制月球
ctx.rotate(2 * Math.PI / 6 * time.getSeconds() + 2 * Math.PI / 6000 * time.getMilliseconds());
ctx.translate(40, 0);
ctx.drawImage(moon, -3.5, -3.5);
ctx.restore();

requestAnimationFrame(draw);
}</code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">2</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">3</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">4</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">5</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">6</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">7</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">8</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">9</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">10</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">11</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">12</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">13</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">14</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">15</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">16</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">17</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">18</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">19</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">20</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">21</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">22</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">23</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">24</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">25</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">26</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">27</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">28</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">29</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">30</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">31</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">32</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">33</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">34</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">35</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">36</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">37</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">38</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">39</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">40</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">41</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">42</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">43</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">44</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">45</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">46</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">47</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">48</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">49</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">50</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">51</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">52</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">53</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">54</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">55</li></ul></pre><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-10/65211642.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"><h2 id="案例2模拟时钟" style="margin-top: 0.8em; margin-bottom: 0.8em; box-sizing: border-box; font-family: "microsoft yahei"; font-weight: 300; line-height: 1.1; color: rgb(63, 63, 63); font-size: 2.15em; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t72" target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"></a>案例2：模拟时钟</h2><pre class="prettyprint" name="code" style="white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-bottom: 1.7em; line-height: 23px; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.047); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="language-html hljshas-numbering" style="display: block; background-color: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace; font-size: 13px; white-space: pre; border-radius: 0px; overflow-x: auto; word-wrap: normal;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
 body {
 padding: 0;
 margin: 0;
 background-color: rgba(0, 0, 0, 0.1)
 }

 canvas {
 display: block;
 margin: 200px auto;
 }
</style>
</head>
<body>
<canvas id="solar" width="300" height="300"></canvas>
<script>
init();

function init(){
 let canvas = document.querySelector("#solar");
 let ctx = canvas.getContext("2d");
 draw(ctx);
}

function draw(ctx){
 requestAnimationFrame(function step(){
 drawDial(ctx); //绘制表盘
 drawAllHands(ctx); //绘制时分秒针
 requestAnimationFrame(step);
 });
}
/*绘制时分秒针*/
function drawAllHands(ctx){
 let time = new Date();

 let s = time.getSeconds();
 let m = time.getMinutes();
 let h = time.getHours();

 let pi = Math.PI;
 let secondAngle = pi / 180 * 6 * s;//计算出来s针的弧度
 let minuteAngle = pi / 180 * 6 * m + secondAngle / 60;//计算出来分针的弧度
 let hourAngle = pi / 180 * 30 * h + minuteAngle / 12;//计算出来时针的弧度

 drawHand(hourAngle, 60, 6, "red", ctx);//绘制时针
 drawHand(minuteAngle, 106, 4, "green", ctx);//绘制分针
 drawHand(secondAngle, 129, 2, "blue", ctx);//绘制秒针
}
/*绘制时针、或分针、或秒针
* 参数1：要绘制的针的角度
* 参数2：要绘制的针的长度
* 参数3：要绘制的针的宽度
* 参数4：要绘制的针的颜色
* 参数4：ctx
* */
function drawHand(angle, len, width, color, ctx){
 ctx.save();
 ctx.translate(150, 150); //把坐标轴的远点平移到原来的中心
 ctx.rotate(-Math.PI / 2 + angle);//旋转坐标轴。 x轴就是针的角度
 ctx.beginPath();
 ctx.moveTo(-4, 0);
 ctx.lineTo(len, 0);// 沿着x轴绘制针
 ctx.lineWidth = width;
 ctx.strokeStyle = color;
 ctx.lineCap = "round";
 ctx.stroke();
 ctx.closePath();
 ctx.restore();
}

/*绘制表盘*/
function drawDial(ctx){
 let pi = Math.PI;

 ctx.clearRect(0, 0, 300, 300); //清除所有内容
 ctx.save();

 ctx.translate(150, 150); //一定坐标原点到原来的中心
 ctx.beginPath();
 ctx.arc(0, 0, 148, 0, 2 * pi); //绘制圆周
 ctx.stroke();
 ctx.closePath();

 for (let i = 0; i < 60; i++){//绘制刻度。
 ctx.save();
 ctx.rotate(-pi / 2 + i * pi / 30);//旋转坐标轴。坐标轴x的正方形从向上开始算起
 ctx.beginPath();
 ctx.moveTo(110, 0);
 ctx.lineTo(140, 0);
 ctx.lineWidth = i % 5 ? 2 : 4;
 ctx.strokeStyle = i % 5 ? "blue" : "red";
 ctx.stroke();
 ctx.closePath();
 ctx.restore();
 }
 ctx.restore();
}
</script>
</body>
</html></code><ul class="pre-numbering" style="box-sizing: border-box; line-height: 23px; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; padding-top: 6px; padding-bottom: 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">1</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">2</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">3</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">4</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">5</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">6</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">7</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">8</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">9</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">10</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">11</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">12</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">13</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">14</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">15</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">16</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">17</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">18</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">19</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">20</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">21</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">22</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">23</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">24</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">25</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">26</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">27</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">28</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">29</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">30</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">31</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">32</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">33</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">34</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">35</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">36</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">37</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">38</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">39</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">40</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">41</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">42</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">43</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">44</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">45</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">46</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">47</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">48</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">49</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">50</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">51</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">52</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">53</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">54</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">55</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">56</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">57</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">58</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">59</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">60</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">61</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">62</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">63</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">64</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">65</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">66</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">67</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">68</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">69</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">70</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">71</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">72</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">73</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">74</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">75</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">76</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">77</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">78</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">79</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">80</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">81</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">82</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">83</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">84</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">85</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">86</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">87</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">88</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">89</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">90</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">91</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">92</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">93</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">94</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">95</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">96</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">97</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">98</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">99</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">100</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">101</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">102</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">103</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">104</li><li style="box-sizing: border-box; padding-right: 5px; padding-left: 5px; list-style: none; margin-left: 0px;">105</li></ul></pre><p style="margin-bottom: 1.7em; box-sizing: border-box; line-height: 27px; word-break: normal; color: rgb(63, 63, 63); font-family: "microsoft yahei"; font-variant-numeric: normal; font-variant-east-asian: normal;"><img src="http://o7cqr8cfk.bkt.clouddn.com/17-6-10/61345876.jpg" alt="" title="" style="border: none; box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; max-width: 602px; max-height: 100%; height: auto;"></div>

页: [1]

吾知网's Archiver

学习HTML5 Canvas这一篇文章就够了