Canvas画布

时间 2019-12-12

标签 canvas 画布繁體版

原文原文链接

canvascss

使用 <canvas> 元素不是很是难但你须要一些基本的HTML和JavaScript知识。<canvas> 元素不被一些老的浏览器所支持，可是全部的主流浏览器的新近版本都支持。Canvas 的默认大小为300像素×150像素（宽×高，像素的单位是px）。可是，可使用HTML的高度和宽度属性来自定义Canvas 的尺寸。为了在 Canvas 上绘制图形，咱们使用一个JavaScript上下文对象，它能动态建立图像（ creates graphics on the fly）。

canvas的默认宽高为：300x150
canvas在设置宽高时不可以使用css来设置宽高，若是使用css来设置宽高，那么图像会缩放，不会变大
若是浏览器不支持canvas，会显示canvas标签之间的内容
获得上下文对象时，通常咱们传入的是“2d”,2d指的是能够绘制平面图形，若是在绘制3d图形，传入“webgl”
经过getContext方法获得一个CanvasRenderingContext2D对象，这个对象就是操做canvas的一个上下文对象（工具集）。
若是给canvas在js代码中从新设置宽高，未来canvas中的内容会被清空

canvas的API:

方法：

getContext("2d"):获得上下文对象
moveTo()：将画笔移动到某一点
lineTo()：肯定要链接的另外一点
stroke()：将以上全部的路径链接起来

fill()：将以上全部的路径组成的图形填充起来

<canvas id="cas"> 若是浏览器不支持canvas，会显示这段内容 </canvas>
    <script>
        //1.0获得canvas对象
        var cas = document.getElementById("cas"); //1.1给画布设置宽高：
 cas.width = 600; cas.height = 300; //2.0获得绘制上下文对象
        var ctx = cas.getContext("2d"); //3.0将点移动到100，100位置
 ctx.moveTo(100,100);//将画笔移动到100，100的位置
        //4.0将线的终点也标记出来
 ctx.lineTo(200,100);//标记另外一点200，100而且记录，未来以上两点要用线链接起来
        //5.0将全部的描点连接起来
 ctx.stroke(); </script>

　　非零环绕原则：web

closePath：将全部的路径闭合起来
setLineDash():用来设置虚线（它里面要传入一个参数，参数的类型是数组）\

getLineDash():获得传入的虚线数组

<canvas id="cas"></canvas>
    <script>
        //1.0获得canvas对象
        var cas = document.getElementById("cas"); //2.0设置宽高
 cas.width = 600; cas.height = 600; //3.0获得上下文对象
        var ctx = cas.getContext("2d"); ctx.moveTo(100,100); ctx.lineTo(500,100); ctx.lineTo(500,500); ctx.lineTo(100,500); ctx.closePath(); ctx.moveTo(250,250); ctx.lineTo(250,350); ctx.lineTo(350,350); ctx.lineTo(350,250); ctx.closePath(); ctx.stroke(); ctx.fill(); </script>

属性：

lineWidth：设置路径的宽度
lineDashOffset：设置虚线的偏移距离
strokeStyle：设置线段描边的颜色

fillStyle: 设置路径所围区域的颜色

<canvas id="cas"></canvas>
    <script>
        //1.0获得canvas对象
        var cas = document.getElementById("cas"); //2.0设置宽高
 cas.width = 600; cas.height = 300; //3.0获得上下文对象
        var ctx = cas.getContext("2d"); ctx.moveTo(250,100); ctx.lineTo(350,100); ctx.lineTo(350,200); ctx.lineTo(250,200); ctx.closePath(); ctx.lineWidth = 20; // ctx.strokeStyle = "red";
        // ctx.strokeStyle = "#0f0";
 ctx.strokeStyle = "rgb(0,0,255)"; ctx.fillStyle = "pink"; ctx.stroke(); ctx.fill(); </script>

绘制一个折线图

<canvas id="cas"></canvas>
    <script>
        //1.0获得canvas对象
        var cas = document.getElementById("cas"); //2.0设置宽高
 cas.width = 600; cas.height = 600; //3.0获得上下文对象
        var ctx = cas.getContext("2d"); //4.0绘制坐标系
        var paddingTop; var paddingBottom; var paddingRight; var paddingLeft; var arrW = 10; var arrH = 26; paddingTop = paddingBottom = paddingRight = paddingLeft = 30; var x0 = paddingLeft; var y0 = cas.height - paddingBottom; //4.1绘制轴线
 ctx.beginPath(); ctx.moveTo(x0,paddingTop); ctx.lineTo(x0,y0); ctx.lineTo(cas.width - paddingRight,y0); ctx.stroke(); //4.2绘制箭头
 ctx.beginPath(); ctx.moveTo(x0,paddingTop); ctx.lineTo(x0 - arrW / 2 , paddingTop + arrH); ctx.lineTo(x0 , paddingTop + arrH / 2); ctx.lineTo(x0 + arrW / 2 , paddingTop + arrH); ctx.closePath(); ctx.moveTo(cas.width - paddingRight,y0); ctx.lineTo(cas.width - paddingRight - arrH , y0 - arrW / 2); ctx.lineTo(cas.width - paddingRight - arrH / 2 , y0); ctx.lineTo(cas.width - paddingRight - arrH , y0 + arrW / 2); ctx.closePath(); ctx.fill(); //4.3绘制坐标上的小点：
        var l = 8; var points = [[10,10],[15,30],[30,5],[50,8],[55,40]];//二维数组。
        for(var i =  0 ; i < points.length ; i ++ ) { //取出对应点的x，y
            var pX = points[i][0]; var pY = points[i][1]; //将圆点由本身的圆点切换成画布的左上角
 pX = x0 + points[i][0]; pY = y0 - points[i][1]; //根据x,y绘制小点(绘制一个矩形)
 ctx.beginPath(); ctx.lineWidth = 4; ctx.moveTo(pX - l / 2,pY - l / 2); ctx.lineTo(pX + l / 2,pY - l / 2); ctx.lineTo(pX + l / 2,pY + l / 2); ctx.lineTo(pX - l / 2,pY + l / 2); ctx.closePath(); ctx.stroke(); } </script>

绘制矩形：

canvasRenderingContext2D.rect(x,y,width,height);//绘制矩形

x,y起点的坐标

width,height矩形对应的宽高

这个方法只会设置矩形的路径，不会进行填充或者是描边(不建议使用这个方法由于它若是要填充或者是描边，还须要借助:fill(),stroke();

canvasRenderingContext2D.strokeRect(x,y,width,height);:

做用：描边一个矩形

canvasRenderingContext2D.fillRect(x,y,width,height);

做用：填充一个矩形

canvasRenderingContext2D.clearRect(x,y,width,height);

做用：清除一个矩形区域

<canvas id="cas"></canvas>
    <script>
        //1.0获得canvas对象
        var cas = document.getElementById("cas"); //2.0设置宽高
 cas.width = 600; cas.height = 600; //3.0获得上下文对象
        var ctx = cas.getContext("2d"); //4.0直接使用canvas中的方法来绘制矩形：（100，100），200，100
 ctx.rect(100,100,200,100); // ctx.stroke();
 ctx.fill(); ctx.strokeRect(100,250,200,100); ctx.fillRect(100,400,200,100); //清除一个矩形区域：
 ctx.clearRect(120,120,50,50); ctx.clearRect(200,150,80,300); ctx.clearRect(0,0,cas.width,cas.height); // cas.width = width;
        // cas.height = height;
    </script>

　　3.绘制圆弧：

canvasRenderingContext2D.arc(x,y,radius,beginAngle,endAngle,anticlockwise);

做用：绘制一段圆弧

参数：

x,y绘制圆弧的起始坐标

radius:圆弧的半径

beginAngle:开始的弧度(不是角度)

endAngle:结束的弧度（不是角度）

anticlockwise：判断是不是逆时针(这个参数是可选参数，默认值为false，说明绘制方法是顺时针绘制，若是设置为true,那么绘制方法改成逆时针)

注意：

1）arc须要配合fill或者是stroke方法来进行绘制

2）arc方法的0度角是水平向右

3）arc方法要配合moveTo方法来使用

<canvas id="cas"></canvas>
    <script>
        //1.0获得canvas对象
        var cas = document.getElementById("cas"); //2.0设置宽高
 cas.width = 600; cas.height = 600; //3.0获得上下文对象
        var ctx = cas.getContext("2d"); //4.0绘制一个圆
 ctx.arc(300, 300, 100, 0, 2 * Math.PI); ctx.stroke(); </script>

<canvas id="cas"></canvas>
    <script>
        //1.0获得canvas对象
        var cas = document.getElementById("cas"); //2.0设置宽高
 cas.width = 600; cas.height = 600; //3.0获得上下文对象
        var ctx = cas.getContext("2d"); //4.0使用arc方法来绘制一个圆形
        // ctx.arc(300,300,100,0,2*Math.PI);
        // ctx.stroke();
        //角度转弧度：
        function toRadian( angle) { return angle * Math.PI / 180; } //弧度转角度：
        function toAngle (radian) { return radian * 180 / Math.PI; } //4.1绘制一个圆弧
 ctx.moveTo(300,300); ctx.arc(300,300,100,0, toRadian(90)); ctx.closePath(); ctx.stroke(); </script>

canvasRenderingContext2D.arcTo(x,y,x1,y1,radius):

做用：绘制一段与线段相切的圆弧

参数：

x,y起点坐标

x1,y1终点坐标

radius:半径

<canvas id="cas"></canvas>
    <script>
        //1.0获得canvas对象
        var cas = document.getElementById("cas"); //2.0设置宽高
 cas.width = 600; cas.height = 300; //3.0获得上下文对象
        var ctx = cas.getContext("2d"); //4.0绘制一段与线段相切的圆弧
        var r = 50; ctx.moveTo(20,20); ctx.arcTo(170,20,170,70,r); ctx.lineTo(170,170); ctx.stroke(); </script>

　　圆角矩形canvas

<canvas id="cas"></canvas>
    <script>
        //1.0获得canvas对象
        var cas = document.getElementById("cas"); //2.0设置宽高
 cas.width = 600; cas.height = 300; //3.0获得上下文对象
        var ctx = cas.getContext("2d"); //4.0绘制四条不相交的线段
 ctx.moveTo(100,100); ctx.lineTo(300,100); ctx.arcTo(90,100,90,110,10); ctx.moveTo(310,110); ctx.lineTo(310,210); // ctx.arcTo(310,100,310,110,10);
 ctx.arcTo(310,100,300,100,10); ctx.moveTo(300,220); ctx.lineTo(100,220); ctx.arcTo(310,220,310,210,10); ctx.moveTo(90,210); ctx.lineTo(90,110); ctx.arcTo(90,220,100,220,10); ctx.stroke(); </script>

　　4.绘制文本数组

canvasRenderingContext2D.strokeText(text, x, y);

做用:在页面上绘制一段文本（将文本进行描边）

参数：

text:绘制的文本

x,y文本绘制的位置

注意：

1）默认状况下绘制出来的文本会靠近点的右上方显示

2）strokeText是空心的，fillText是实心的

<canvas id="cas"></canvas>
    <script>
        //1.0获得canvas对象
        var cas = document.getElementById("cas"); //2.0设置宽高
 cas.width = 600; cas.height = 300; //3.0获得上下文对象
        var ctx = cas.getContext("2d"); //4.0在canvas中绘制Hello Wrold
        var str = "Hello World"; var x = 100; var y = 100; ctx.font = "30px '楷体'"; ctx.strokeText(str,x,y); ctx.arc(x,y,2,0,2*Math.PI); ctx.stroke(); ctx.beginPath(); ctx.fillText(str,x,y + 100); ctx.arc(x,y + 100,2,0,2*Math.PI); ctx.stroke(); </script>

canvasRenderingContext2D.fillText(text, x, y);浏览器

做用：在页面上绘制一段文本（将文本进行填充）

CanvasRenderingContext2D.textAlign:

做用：设置文本水平方向上的位置

取值：

left:默认

right:靠右显示

center:居中显示

CanvasRenderingContext2D.textBaseline

做用：设置文本垂直方向上的位置

取值：

baseLine:

middle:

bottom:

top:

CanvasRenderingContext2D.measureText()：

做用：获得一个对象，这个对象能够帮助咱们获得文本的宽度。

<canvas id="cas"></canvas>
    <script>
        //1.0获得canvas对象
        var cas = document.getElementById("cas"); //2.0设置宽高
 cas.width = 600; cas.height = 600; //3.0获得上下文对象
        var ctx = cas.getContext("2d"); //4.0在canvas中绘制Hello Wrold
        var str = "Hello World"; var x = 300; var y = 100; ctx.font = "18px '楷体'"; //设置文本水平方向上的位置：textAlign
        // ctx.strokeText(str,x,y);
        // ctx.moveTo(x,0);
        // ctx.lineTo(x,300);
        // ctx.stroke();
        // ctx.beginPath();
        // ctx.textAlign = "right";
        // ctx.strokeText(str,x,y+50);
        // ctx.beginPath();
        // ctx.textAlign = "center";
        // ctx.strokeText(str,x,y+100);
        //设置文本垂直方向上的位置：textBaseline
        // ctx.beginPath();
        // ctx.moveTo(0,300);
        // ctx.lineTo(600,300);
        // ctx.stroke();
        // ctx.fillText(str, 0 ,300);
        // //top, middle, bottom
        // ctx.beginPath();
        // ctx.textBaseline = "top";
        // ctx.fillText(str, 150,300)
        // ctx.beginPath();
        // ctx.textBaseline = "middle";
        // ctx.fillText(str, 300,300)
 ctx.beginPath(); ctx.textBaseline = "bottom"; ctx.fillText(str, 450,300) //获得文本的宽度：
        var size = ctx.measureText(str); alert(size.width) </script>

　　5. 绘制图形
　　若是要绘制图片，必须先获得一张图片，获得图片的方式有两种：
　　第一种：直接从dom元素中取
　　第二种：使用new关键字new出来
　　　　CanvasRenderingContext2D.drawImage( img, dx, dy )dom

做用：在canvas中绘制一张图片工具

　　参数：
　　　　img：要绘制的图片对象
　　　　dx，dy：图片在canvas中的绘制位置
　　　　CanvasRenderingContext2D.drawImage( img, dx, dy , dWidth, dHeight )webgl

<canvas id="cas"></canvas>
    <!-- <img src="imgs/1.jpg" alt="" id="img"> -->
    <script>
        //1.0获得canvas对象
        var cas = document.getElementById("cas"); //2.0设置宽高
 cas.width = 600; cas.height = 600; //3.0获得上下文对象
        var ctx = cas.getContext("2d"); //4.0绘制一张图片
        //4.1获得图片对象的第一种方式
        // var img = document.getElementById("img");
        // //若是要绘制这张图片必须保证图片已经被正常加载出来了
        // img.onload = function(){
        // //4.2使用drawImage方法绘制图片
        // ctx.drawImage(img, 100, 100);
        // }
        //4.2获得图片对象的第二种方式
        var img = new Image();//建立一个图片对象
 img.src = "imgs/1.jpg";//给对象添加一个路径属性，未来这张图片就是这个路径下面的图片
 img.onload = function(){ ctx.drawImage(img,200,200); } </script>

　　做用：在canvas中绘制一张图片
　　参数：
　　　　img：要绘制的图片对象
　　　　dx，dy：图片在canvas中的绘制位置
　　　　dWidth, dHeight:给绘制图片设置宽高
　　　　CanvasRenderingContext2D.drawImage( img, sx, sy, sWidth, sHeight, dx, dy , dWidth, dHeight )
　　this

canvas id="cas"></canvas>
    <script>
        //1.0获得canvas对象
        var cas = document.getElementById("cas"); //2.0设置宽高
 cas.width = 600; cas.height = 600; //3.0获得上下文对象
        var ctx = cas.getContext("2d"); //4.0获得图片对象
        var img = new Image(); img.src = "imgs/2.jpg"; img.onload = function(){ ctx.drawImage(img,0,0,600, 600 * this.height / this.width); } </script>

做用：在canvas中绘制一张图片
　　参数：
　　　　img：要绘制的图片对象
　　　　sx,sy：从要绘制图片中裁剪的图片起始坐标
　　　　sWidth,sHeight:从要绘制的图片中裁剪的图片宽高
　　　　dx，dy：图片在canvas中的绘制位置
　　　　dWidth, dHeight:给绘制图片设置宽高spa

<canvas id="cas"></canvas>
    <script>
        //1.0获得canvas对象
        var cas = document.getElementById("cas"); //2.0设置宽高
 cas.width = 600; cas.height = 600; //3.0获得上下文对象
        var ctx = cas.getContext("2d"); //4.0获得一个图片对象
        var img = new Image(); img.src = "imgs/2.jpg"; img.onload = function(){ // ctx.drawImage( img, 719, 264, 43, 75, 100, 100, 200, 200 * 75 / 43);
 ctx.drawImage(img, 719 , 264, 43, 75, 100, 100, 43, 75); } </script>

　　6. 变换
　　在canvas中若是要绘制图形，坐标系起着相当重要的做用。在canvas中为了可以绘制出更多图形来，canvas为咱们准备一系列的变换方法。
　　做用：可使用变换帮助我绘制更多类型的图形。

　　translate(); 平移变换
　　scale(); 伸缩变换
　　rotate(); 旋转变换
　　变换之后的坐标系会影响后面结构

<canvas id="cas"></canvas>
    <script>
        //角度转弧度：
        function toRadian(angle) { return angle * Math.PI / 180; } //弧度转角度
        function toAngle (radian) { return radian * 180 / Math.PI; } //1.0获得canvas对象
        var cas = document.getElementById("cas"); //2.0设置宽高
 cas.width = 600; cas.height = 300; //3.0获得上下文对象
        var ctx = cas.getContext("2d"); //4.0在canvas中心绘制一个矩形
        //4.1将坐标平移到画布中心位置
 ctx.translate( cas.width / 2, cas.height / 2); //4.2绘制矩形
        var l = 100; var x = -l / 2; var y = -l / 2; var angle = 2; var speed = 1000; setInterval(function() { //先清除画布内容
 ctx.clearRect( -cas.width / 2, -cas.height / 2, cas.width, cas.height); //旋转
 ctx.rotate(toRadian(angle)); //绘制矩形
 ctx.strokeRect( x, y, l, l); // angle ++;
 }, 1000 / speed); </script>

　　7. 状态的保存和恢复

　　在canvas中全部的状态属性都会一直保存下去，影响下面代码的样式，因此为了解决这个问题，咱们能够进行状态的保存的恢复。

　　save(); //将以前的状态保存起来
　　restore(); //将上一次保存的状态恢复过来

    <canvas id="cas"></canvas>
    <script>
        //1.0获得canvas对象
        var cas = document.getElementById("cas"); //2.0设置宽高
 cas.width = 600; cas.height = 300; //3.0获得上下文对象
        var ctx = cas.getContext("2d"); //当代码运行到这里的时候，咱们的canvas中属性的状态，所有是默认的
        //我但愿在这里把全部的默认状态所有保存起来
 ctx.save(); //4.0绘制一个矩形（描边红色，填充绿色，线宽10）
 ctx.beginPath(); ctx.fillStyle = "red"; ctx.strokeStyle = "blue"; ctx.lineWidth = 10; ctx.rect(100,100,100,100); ctx.stroke(); ctx.fill(); //当代码运行到这里的时候，咱们的canvas中属性的状态被修改了
        //咱们但愿在这里把之保存的状态恢复过来
 ctx.restore(); //5.0绘制第二个矩形（全部样式我都但愿是默认的）
 ctx.beginPath(); ctx.rect(300,100,100,100); ctx.stroke(); ctx.fill(); </script>