HTML5 canvas画布详解（四）

百变鹏仔 2个月前 (10-18) #H5教程

文章标签画布

arcTo用法

用法：arcto(x1, y1, x2, y2, radius)
说明：arcto()方法将利用当前端点、端点1(x1,y1)和端点2(x2,y2)这三个点所形成的夹角，然后绘制一段与夹角的两边相切并且半径为radius的圆上的弧线。弧线的起点就是当前端点所在边与圆的切点，弧线的终点就是端点2(x2,y2)所在边与圆的切点，并且绘制的弧线是两个切点之间长度最短的那个圆弧。此外，如果当前端点不是弧线起点，arcto()方法还将添加一条当前端点到弧线起点的直线线段。

<!DOCTYPE html>  <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>arcTo()绘制</title>  </head>  <body>  <canvas id="drawing" width="400" height="300" style="border:#0F0 solid 1px">A Drawing of something</canvas>  <script>  var drawing=document.getElementById("drawing");  //确定浏览器支持<canvas>元素  if(drawing.getContext){  //取得绘图上下文对象的引用，“2d”是取得2D上下文对象  var context=drawing.getContext("2d");//设置canvas的onmouse事件//路径指定context.beginPath();//单独使用arcTo()方法必须指定绘图开始的基点context.moveTo(20,20);//创建两切线之间的弧/曲线context.arcTo(200,150,20,280,50);//起始端点(20,20)、端点1(290,150)、端点2(20,280)三点组成的夹角相切并且半径为50的圆弧，并且只保留两切点之间圆弧部分以及起始端点到第一个切点之间部分context.lineTo(200,280);//绘图context.strokeStyle="red";//指定路径线的粗细context.lineWidth=3;//绘制路径context.stroke();//绘制文字标注context.fillText("当前端点(20,20)", 20,20);context.fillText("端点1(200,150)", 200,150);context.fillText("端点2(20,280)", 20,280);context.fillText("直线结束点(200,280)", 200,280);//绘制辅助线context.lineWidth = 1;context.strokeStyle="blue";context.moveTo(20,20);context.lineTo(200,150);context.lineTo(20,280);context.stroke();}  </script>  </body>  </html>

如上图，当前端点(20,20)、端点1（200，150），端点2（20，280）三点组成夹角绘制弧线，弧线半径为50并与夹角相切。当前端点不是弧线起点，arcTo()方法还将添加一条当前端点到弧线起点的直线线段。
最后一段直线则是context.lineTo(200,280);绘制出来的，与arcTo绘制的弧线没有关系。

stroke()和fill()用法

stroke()：绘制已定义的路径
fill()：填充当前绘图路径
下面的代码中我用了两个画布，画图方法分别为drawCanvas1和drawCanvas2，以方便比较两者的区别。

<!Doctype html><html><head><title>stroke()、fill()用法</title><meta charset="utf-8"/><style>    .myCanvas{            border:2px solid #f00;        }    </style>    <script>    window.onload = function(){             drawConvas1();        drawConvas2();    };    function drawConvas1(){        var canvas = document.getElementById("myCanvas1");                var context = canvas.getContext("2d");                //1、绘制三解形路径        context.beginPath();        context.moveTo(20,20);        context.lineTo(20,100);        context.lineTo(100,100);        context.lineTo(20,20);        context.strokeStyle = "red";        context.stroke();           //2、绘制矩形80*80        context.beginPath();        context.moveTo(20,200);        context.lineTo(100,200);        context.lineTo(100,280);        context.lineTo(20,280);        context.lineTo(20,200);        context.stroke();        //绘制坐标点标注，以方便看其原理        context.fillText("(20,20)",20,20);        context.fillText("(20,100)",20,100);        context.fillText("(100,100)",100,100);              context.fillText("(20,200)",20,200);        context.fillText("(100,200)",100,200);        context.fillText("(100,280)",100,280);        context.fillText("(20,280)",20,280);    }        function drawConvas2(){        var canvas = document.getElementById("myCanvas2");                var context = canvas.getContext("2d");                //1、绘制三解形填充        context.beginPath();        context.moveTo(20,20);        context.lineTo(20,100);        context.lineTo(100,100);        context.lineTo(20,20);        context.fillStyle = "red";        context.fill();         //2、绘制填充矩形80*80，先绘制路径再用fill()方法填充        context.beginPath();        context.moveTo(20,200);        context.lineTo(100,200);        context.lineTo(100,280);        context.lineTo(20,280);        context.lineTo(20,200);        context.fill();        //上面的代码相当于        //context.fillRect(20,200,80,80);        //3、使用方法fillRect(x,y,width,height)绘制矩形填充        context.fillRect(120,200,80,80);    }</script></head><body>    <p>        <canvas class="myCanvas" id="myCanvas1" width="400" height="400">            您的浏览器不支持canvas                    </canvas>        <canvas class="myCanvas" id="myCanvas2" width="400" height="400">            您的浏览器不支持canvas                    </canvas>    </p>    </body>    </html>

createPattern()用法

语法：createPattern(image, repetitionStyle)
说明：createPattern()方法用于创建一个表示将图像在当前图形上以什么样的方式进行重复平铺的CanvasPattern对象。参数image指定用于平铺的图像，该参数可以是一个Image对象，也可以是一个Canvas对象。参数repetitionStyle表示图像如何进行重复平铺，可能的值有repeat(在水平和垂直方向上均进行重复平铺，这也是默认值)、repeat-x(只在水平方向上重复平铺)、repeat-y(只在垂直方向上重复平铺)、no-repeat(只铺一次，不进行重复平铺)。
看下面的示例：

立即学习“前端免费学习笔记（深入）”；

<!Doctype html><html><head><title>createPattern()用法</title><meta charset="utf-8"/><style>    .myCanvas{        border:2px solid #f00;    }</style><script>    window.onload = function(){             drawConvas1();        drawConvas2();    };    function drawConvas1(){        var canvas = document.getElementById("myCanvas1");        var context = canvas.getContext("2d");        //1、创建一个图片对象        var img = new Image();        img.src = "html5.png";        ///当图片加载完毕后再设置对应的图像平铺模式并填充矩形        img.onload = function(){            var pattern = context.createPattern(img, "repeat");            context.fillStyle = pattern;            context.fillRect(0,0,200,200);        }    }    function drawConvas2(){        var canvas = document.getElementById("myCanvas2");        var context = canvas.getContext("2d");        //1、创建一个图片对象        var img = new Image();        img.src = "html5.png";        ///当图片加载完毕后再设置对应的图像平铺模式并填充矩形        img.onload = function(){            var pattern = context.createPattern(img, "repeat");            context.fillStyle = pattern;            context.fillRect(30,30,200,200);        }    }</script></head><body>    <div>        <canvas class="myCanvas" id="myCanvas1" width="400" height="400">            您的浏览器不支持canvas        </canvas>        <canvas class="myCanvas" id="myCanvas2" width="400" height="400">            您的浏览器不支持canvas        </canvas>    </div></body></html>

注意二者的区别，仅仅在于矩形区域的起点坐标。第一个为canvas画布的起点坐标(0,0)，第二个起点为(30,30)。从效果来看第二幅图的第一个图像并不是完整的。
需要注意：CanvasPattern对象开始平铺图像的参考起点并不是我们当前绘制图形的左上角，而是整个canvas画布的左上角，确切地说，即canvas的起点坐标(0,0)。

createImageData和putImageData

语法：

createImageData(width,height);创建宽和高分别为width和height的ImageData 对象。返回ImageData对象。
createImageData(imageData);创建与指定的imageData对象相同的新的ImageData对象。返回ImageData对象。
putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);
功能：将图像数据（从指定的 ImageData 对象）放回画布上。
imgData：为需要放置在画布上的ImageData对象。
x：画布的左上角x坐标
y：画布的左上角y坐标
dirtyX,dirtyY,dirtyWidth,dirtyHeight四个参数可选，如果没有该四个参数，则将imageData从x、y坐标完整绘制在画布上；若有该四个参数，则保留imageData的dirtyX,dirtyY起始坐标，宽dirtyWidth、高dirtyHeight的部分图像。
getImageData(x,y,width,height);x、y为开始复制的左上角位置的 x 坐标，width、height为将要复制区域的宽和高。返回ImageData 对象。

<!Doctype html><html><head><title>putImageData()用法</title><meta charset="utf-8"/><style>    .myCanvas{        border:2px solid #f00;    }</style><script>    window.onload = function(){             drawConvas1();        drawConvas2();    };    //画布1使用createImageData()、putImageData()画图    function drawConvas1(){        var canvas = document.getElementById("myCanvas1");        var context = canvas.getContext("2d");        var imgData=context.createImageData(100,100);        for (var i=0;i<imgData.data.length;i+=4)        {            imgData.data[i+0]=255;            imgData.data[i+1]=0;            imgData.data[i+2]=0;            imgData.data[i+3]=255;        }        context.putImageData(imgData,10,10);            }    //画布2使用getImageData()、putImageData()画图    function drawConvas2(){        //获取canvas1中的ImageData,并绘制在canvas2中        var canvas1 = document.getElementById("myCanvas1");        var context1 = canvas1.getContext("2d");                var imgData = context1.getImageData(10,10,100,100);        var canvas2 = document.getElementById("myCanvas2");        var context2 = canvas2.getContext("2d");        context2.putImageData(imgData,10,10);           }</script></head><body>    <div>        <canvas class="myCanvas" id="myCanvas1" width="400" height="400">            您的浏览器不支持canvas        </canvas>        <canvas class="myCanvas" id="myCanvas2" width="400" height="400">            您的浏览器不支持canvas        </canvas>    </div></body></html>

toDataURL()

语法：canvas.toDataURL(“image/png”);注意对象是canvas而不是context
功能：将convas画布导出为图片，返回图片数据。

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <title>canvas绘图</title>    <script>    window.onload = function()    {        drawCanvas1();        drawCanvas2();    }    function drawCanvas1()    {        var canvas=document.getElementById("myCanvas1");        var context=canvas.getContext("2d");        //绘制红色矩形        context.fillStyle="red";        context.fillRect(10,10,200,200);            }    function drawCanvas2()    {        //取得画布1图像的数据URL        var canvas1 = document.getElementById("myCanvas1");        var imgURL = canvas1.toDataURL("image/png");        //把画布1的图像显示在画布2上        var canvas2=document.getElementById("myCanvas2");        var context2=canvas2.getContext("2d");        var image = new Image();        image.src = imgURL;        context2.drawImage(image, 10, 10);    }    </script></head><body>    <canvas id="myCanvas1" width="400" height="400" style="border:#F00 solid 1px">        您的浏览器不支持canvas    </canvas>    <canvas id="myCanvas2" width="400" height="400" style="border:#F00 solid 1px">        您的浏览器不支持canvas    </canvas>    <br />    <h3>canvas2为使用toDataURL()方法，导出在canvas1元素上绘制的图像。</h3></body></html>

注意为什么画布二的矩形位置和画布一不一样？
因为toDataURL()导出的是整个画布，而画布二又是从（10，10）开始绘制的。

文章推荐

HTML5 canvas画布详解（四）

arcTo用法

stroke()和fill()用法

createPattern()用法

createImageData和putImageData

toDataURL()

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集