Canvas绘图API总结
admin
8年前
<h2>一. 绘图API总览：</h2> <ul> <li>strokeStyle</li> <li>fillStyle</li> <li>lineWidth</li> <li>save()</li> <li>restore()</li> <li>beginPath()</li> <li>closePath()</li> <li>stroke()</li> <li>lineTo(x, y)</li> <li>moveTo(x, y)</li> <li>quadraticCurveTo(cpx, cpy, x, y)</li> <li>bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)</li> <li>arcTo(x1, y1, x2, y2, radius)</li> <li>arc(x, y, radius, startAngle, endAngle [, anticlockwise])</li> <li>createLinearGradient(x0, y0, x1, y1)</li> <li>createRadialGradient(x0, y0, r0, x1, y1, r1)</li> <li>clearRect(x, y, width, height)</li> <li>fillReact(x, y, width, height)</li> </ul> <h2>二. canvas上下文</h2> <p>每个canvas元素都包含一个绘图上下文，可以通过它访问绘图API。</p> <pre> <code class="language-javascript">var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"); </code></pre> <p><code>getContext()</code>传入字符串参数”2d”，用于指定将要使用的平面绘图API类型。</p> <p><code>getContext()</code>传入字符串参数”3d”，用于指定3D绘图 API，但是目前兼容性极差。</p> <h2>三. 消除图案</h2> <p>在大多数动画中，必须在绘制下一帧图案前清除canvas，通过这样来模拟出物体正在运动的效果。</p> <p>context.clearRect(x, y, width, height)方法会通过将像素的颜色设置为全透明的黑色擦除指定区域内的每一个像素，从而清除指定的矩形区域。</p> <h2>四. 设置线条的外观</h2> <ul> <li><code>strokeStyle</code>：指定线条颜色；</li> <li><code>lineWidth</code>：线条宽度；</li> <li><code>lineCap</code>：线条重点的绘制样式。可选值有：butt（默认，延长线）、round（圆的）、square（平的）；</li> <li><code>lineJoin</code>：两条线段的接合方式。可选值有：round、bevel、miter（默认）；</li> <li><code>miterLimit</code>：用于控制两条相交线外侧交点与内侧交点的距离。</li> </ul> <h2>五. 使用填充色创建图形</h2> <ul> <li><strong>context.fillStyle</strong>：填充样式。可以填充纯色、渐变色、pattern和图片。</li> <li><strong>context.fill()</strong>：开始填充。</li> </ul> <h2>六. 创建简便填充色</h2> <p><strong>线性渐变</strong>：<strong>context.createLinearGradient(x0, y0, x1, y1)</strong>：将沿点(x0, y0)与点(x1, y1)之间的直线填充渐变色。</p> <p><strong>放射性渐变</strong>：<strong>context.createRadialGradient(x0, y0, r0, x1, y1, r1)</strong>：从指定的空间的中心开始向各个方向扩散，从而创建一个圆形渐变。</p> <h3>6.1 设置渐变点的颜色</h3> <p>可以使用Gradient.addColorStop(ratio, color)方法为渐变色添加渐变点颜色。其中ratio是填充比例，取值范围为[0, 1]。</p> <p>例如：</p> <pre> <code class="language-javascript">var gradient = context.createLinearGradient(0, 0, 100, 100); gradient.addColorStop(0, "#fff"); gradient.addColorStop(1, "#000"); </code></pre> <h2>七. 绘制的样式状态切换</h2> <p><code>context.save()</code>和<code>context.restore()</code>方法可以实现在不同的样式间切换。</p> <p><code>context.save()</code>方法将canvas的当前状态存入栈中，其中包含各种样式，例如，strokeStyle、fillStyle以及应用于canvas的变换效果。</p> <p><code>context.restore()</code>方法可以使得当前的canvas状态出栈，转而使用下一个状态，即使用之前的状态。</p> <h2>八. 绘制直线</h2> <ul> <li><strong>context.beginPath()</strong>：开始绘制新路径；</li> <li><strong>context.moveTo(x0, y0)</strong>：移动到线条起点；</li> <li><strong>context.lineTo(x1, y1)</strong>：连线到线条终点；</li> <li><strong>context.stroke()</strong>：绘制线条。</li> </ul> <p>基于上面的绘图指令，可以创建一个简单的绘图程序，如下：</p> <pre> <code class="language-html"><canvas id="canvas" width="400" height="400" style="background: #ccc;"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"); function onMouseMove(e) { var movePosition = { x: getMouse(e).x, y: getMouse(e).y }; context.lineTo(movePosition.x, movePosition.y); context.stroke(); } canvas.addEventListener("mousedown", function(e) { var curPosition = { x: getMouse(e).x, y: getMouse(e).y }; context.beginPath(); context.moveTo(curPosition.x, curPosition.y); console.log("curPosition: " + curPosition.x + "; " + curPosition.y); canvas.addEventListener("mousemove", onMouseMove, false); }, false); canvas.addEventListener("mouseup", function(e) { canvas.removeEventListener("mousemove", onMouseMove, false); }, false); // 获取鼠标的当前位置 function getMouse(event) { var event = event || window.event; var mouse = {}; var x, y; if(event.pageX || event.pageY) { x = event.pageX; y = event.pageY; } else if(event.clientX || event.clientY) { var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; x = event.clientX + scrollLeft; y = event.clientY + scrollTop; } mouse.x = x; mouse.y = y; return mouse; } </script> </code></pre> <p>演示如下：<a href="/misc/goto?guid=4959677074071554495">http://codepen.io/dengzhirong/pen/PzgaRk</a></p> <p>See the Pen <a href="http://codepen.io/dengzhirong/pen/PzgaRk/">PzgaRk</a> by dengzhirong (<a href="http://codepen.io/dengzhirong">@dengzhirong</a>) on <a href="http://codepen.io">CodePen</a>.</p> <h2>九. 使用quadraticCurveTo绘制曲线</h2> <p>二次贝塞尔曲线<strong>quadraticCurveTo(cpx, cpy, x, y)</strong>接收两个点作为参数：第一个点是控制点，用于影响曲线的形状，第二个点是曲线的终点。</p> <p><strong>quadraticCurveTo()</strong>的绘制方法与<strong>lineTo()</strong>类似，都是以上一次方法调用的重点或上一个<strong>context.moveTo()</strong>的位置作为起点。两者唯一的区别在于绘制出来线条的形状。</p> <p>例子：</p> <pre> <code class="language-html"><canvas id="canvas" width="400" height="400" style="background: #ccc;"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"); var x0 = 100, y0 = 200, x2 = 300, y2 = 200; canvas.addEventListener("mousemove", function(e) { context.clearRect(0, 0, canvas.width, canvas.height); var x1 = getMouse(e).x; y1 = getMouse(e).y; context.beginPath(); context.moveTo(x0, y0); context.quadraticCurveTo(x1, y1, x2, y2); context.stroke(); }, false); // 获取鼠标的当前位置 function getMouse(event) { var event = event || window.event; var mouse = {}; var x, y; if(event.pageX || event.pageY) { x = event.pageX; y = event.pageY; } else if(event.clientX || event.clientY) { var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; x = event.clientX + scrollLeft; y = event.clientY + scrollTop; } mouse.x = x; mouse.y = y; return mouse; } </script> </code></pre> <p>演示如下：<a href="/misc/goto?guid=4959677074145583703">http://codepen.io/dengzhirong/pen/yJAEEP</a></p> <p>See the Pen <a href="http://codepen.io/dengzhirong/pen/yJAEEP/">yJAEEP</a> by dengzhirong (<a href="http://codepen.io/dengzhirong">@dengzhirong</a>) on <a href="http://codepen.io">CodePen</a>.</p> <h3>9.1 鼠标穿过控制点</h3> <p>如果希望鼠标能穿过控制点，可以用下面的共识计算控制点：（假设：以(x0, y0)作为起点，(x2, y2)作为终点，(x1, y1)作为控制点，(xt, yt)为鼠标所在的点）：</p> <pre> <code class="language-javascript">x1 = xt * 2 - (x0 + x2) / 2; y1 = yt * 2 - (y0 + y2) / 2; </code></pre> <p>可以把上面的程序稍作修改后，使鼠标穿过控制点：</p> <p>把以下代码：</p> <pre> <code class="language-javascript">var x1 = getMouse(e).x; y1 = getMouse(e).y; </code></pre> <p>改为：</p> <pre> <code class="language-javascript">var x1 = getMouse(e).x * 2 - (x0 + x2) / 2; y1 = getMouse(e).y * 2 - (y0 + y2) / 2; </code></pre> <p>演示如下：<a href="/misc/goto?guid=4959677074229216892">http://codepen.io/dengzhirong/pen/QEPxBg</a></p> <p>See the Pen <a href="http://codepen.io/dengzhirong/pen/QEPxBg/">QEPxBg</a> by dengzhirong (<a href="http://codepen.io/dengzhirong">@dengzhirong</a>) on <a href="http://codepen.io">CodePen</a>.</p> <h2>十. 其他形式的曲线绘制</h2> <ul> <li><strong>bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)</strong>：增加一个到当前路径的点，并由三次贝塞尔曲线连接两个控制点；</li> <li><strong>arcTo(x1, y1, x2, y2, radius)</strong>：使用两个控制点和指定半径为连接到前一个点的直线路径添加一个弧度；</li> <li><strong>arc(x, y, radius, startAngle, endAngle [, anticlockwise])</strong>：为连接到前一个点的直线路径添加一个弧度，该弧度将以x、y作为圆心，以radius为半径的一个圆的一部分。该弧度的起始角度和终止角度分别由startAngle和endAngle指定。</li> </ul> <p>这些曲线的绘制方法大抵类似。以绘制圆为例子：</p> <pre> <code class="language-javascript">context.beginPath(); context.arc(100, 100, 50, 0, (Math.PI * 2), true); context.closePath(); context.stroke(); </code></pre> <h2>十一. 加载并绘制图片</h2> <p>如果希望在动画中绘制一张外部图片，有两种方式可以用于在动画中访问外部图片：</p> <ul> <li>在脚本运行过程中加载一个URL；</li> <li>使用DOM接口访问一个内嵌在HTML中的图片元素。</li> </ul> <p>当图片加载完成后，再使用绘图API将其渲染到canvas。</p> <h3>11.1 加载图片</h3> <p>为了实现在运行时加载一张图片，可以创建一个Image对象，并将其src属性设置为图片文件的url路径。当图片加载完成后，它就会执行onload方法所关联的回调函数。</p> <p>如下：</p> <pre> <code class="language-html"><canvas id="canvas" width="180" height="180" style="background: #ccc;"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"), image = new Image(); image.src = "http://www.dengzhr.com/wp-content/themes/dengzhr/images/logo.jpg"; image.onload = function() { context.drawImage(image, 0, 0); }; </script> </code></pre> <p>使用<strong>context.drawImage()</strong>方法将图片绘制到canvas元素上，该方法接受一个图片元素与canvas上的一个x、y坐标。</p> <p><strong>context.drawImage()</strong>方法有以下三种调用方式，分别使用多个参数：</p> <ul> <li><strong>drawImage(image, dx, dy)</strong>：在canvas的(dx, dy)坐标上绘制一张图片。(dx, dy)是图片左上角的位置。</li> <li><strong>drawImage(image, dx, dy, dw, dh)</strong>：分别根据dw、dh的值设定图片的宽度与高度，并将其绘制在canvas的(dx, dy)坐标。</li> <li><strong>drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)</strong>：将图片裁剪到矩形区域(sx, sy, dw, dh)中，并缩放至(dw, dh)，再将其绘制到(dy, dy)坐标上。</li> </ul> <h3>11.2 使用图片元素</h3> <pre> <code class="language-html"><canvas id="canvas" width="180" height="180" style="background: #ccc;"></canvas> <img id="img" src="https://simg.open-open.com/show/69ae75db7aeecefb0a23b44332734528.jpg"> <script type="text/javascript"> var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"), image = document.getElementById("img"); image.onload = function() { context.drawImage(image, 0, 0); }; </script> </code></pre> <h3>11.3 使用视频元素</h3> <p>除了可以将一幅静止的图片绘制到canvas以外，canvas还支持逐帧的视频渲染。</p> <p>由于视频本质上就是按顺序播放的一系列静止的图像，因此canvas元素会在一个动画循环中不断绘制视频中的当前帧。</p> <p>如下：</p> <pre> <code class="language-html"><canvas id="canvas" width="300" height="300" style="background: #ccc;"></canvas> <video id="video" style="display: none; width: 300px; height: 300px;" autoplay> <source src="video.mp4" type="video/mp4" /> <source src="video.webm" type="video/webm" /> <source src="video.ogv" type="video/ogg" /> </video> <script type="text/javascript"> var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"), video = document.getElementById("video"); (function drawFrame() { window.requestAnimationFrame(drawFrame. canvas); context.drawImage(video, 0, 0); })(); </script> </code></pre> <p>来自：http://www.dengzhr.com/js/940</p>