JavaScript的Canvas绘图

目录

一、Canvas简介

二、Canvas基本用法

三、填充和描边

四、绘制矩形

五、绘制路径

5.1、绘制线段

5.2、绘制三角形

5.3、绘制圆弧

5.4、绘制贝塞尔曲线

5.5、线条样式

六、绘制文本

七、绘制图像

八、模式

九、使用图像数据

十、阴影


一、Canvas简介

    元素是HTML5新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的HTML元素。它可以用来制作照片集或者制作简单的动画,甚至可以进行实时视频处理和渲染。

    由几组API构成,除了具备基本绘图能力的2D上下文还具备一个名为WebGL3D上下文

二、Canvas基本用法

    使用元素之前,必须先设置其widthheight属性,指定可以绘图的区域大小。

    出现在开始和结束标签中的内容是后备信息,如果浏览器不支持元素,就会显示这些信息。

A drawing of something.

    要在这块画布上绘图,需要使用getContext()方法传入参数"2d"取得2D上下文对象

        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){
            var context = drawing.getContext("2d"); //取得2D上下文对象
            //更多代码
        }

    使用2D绘图上下文提供的方法,可以绘制简单的2D图形,比如矩形、弧线和路径。

    2D上下文的坐标开始于元素的左上角,原点坐标是(0,0)。

    所有坐标值都基于这个原点计算,x值越大表示越靠右,y值越大表示越靠下。

三、填充和描边

    2D上下文的两种基本绘图操作是填充和描边。

    填充就是用指定的样式(颜色、渐变或图像)填充图形,fillStyle属性设置填充样式。

    描边就是只在图形的边缘画线,strokeStyle属性设置描边样式。

    这两个属性的值可以是字符串、渐变对象或模式对象,例如:

        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){
            
            var context = drawing.getContext("2d"); //取得2D上下文对象
            context.strokeStyle = "red";
            context.fillStyle = "#0000FF";
        }

四、绘制矩形

    与绘制矩形有关的方法包括:

  • fillRect()
  • strokeRect()
  • clearRect()

    这三个方法都能接收4个参数:矩形的x坐标、矩形的y坐标、矩形的宽度和矩形高度。参数单位都是像素。

    示例1

        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象

            //绘制红色矩形
            context.fillStyle = "#F00";
            context.fillRect(10, 10, 50, 50);

            //绘制半透明的蓝色矩形
            context.fillStyle = "rgba(0, 0, 255, 0.5)";
            context.fillRect(30, 30, 50, 50);
        }

JavaScript的Canvas绘图_第1张图片

    示例2

        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象

            //绘制红色描边矩形
            context.strokeStyle = "#F00";
            context.strokeRect(10, 10, 50, 50);

            //绘制半透明的蓝色描边矩形
            context.strokeStyle = "rgba(0, 0, 255, 0.5)";
            context.strokeRect(30, 30, 50, 50);
        }

JavaScript的Canvas绘图_第2张图片

    示例3

        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象

            //绘制红色矩形
            context.fillStyle = "#F00";
            context.fillRect(10, 10, 50, 50);

            //绘制半透明的蓝色描边矩形
            context.fillStyle = "rgba(0, 0, 255, 0.5)";
            context.fillRect(30, 30, 50, 50);

            //在两个矩形重叠的地方清除一个小矩形
            context.clearRect(40, 40, 10, 10);
        }

JavaScript的Canvas绘图_第3张图片

五、绘制路径

    绘制路径的方法:

  • beginPath()    ——    表示要开始绘制新路径。
  • moveTo(x, y)    ——    将绘图游标移动到(x, y),不画线。
  • lineTo(x, y)    ——    从上一点开始绘制一条直线,到(x, y)为止。
  • rect(x, y, width, height)    ——    从点(x,y)开始绘制一个矩形,宽度和高度分别由width和height指定。这个方法绘制的是矩形路径,而不是strokeRect()和fillRect()所绘制的独立的形状。
  • arc(x, y, radius, startAngle, endAngle, counterclockwise)    ——   以(x,y)为圆心绘制一条弧线,弧线半径为radius,起始和结束角度(用弧度表示)分别为startAngle和endAngle。最后一个参数表示startAngle和endAngle是否按逆时针方向计算,值为true表示按逆时针方向计算。
  • quadraticCurveTo(cx, cy, x, y)    ——    绘制二次贝塞尔曲线
  • bezierCurveTo(c1x, c1y, c2x, c2y, x, y)    ——    绘制三次贝塞尔曲线
  • closePath()    ——    绘制一条连接到路径起点的线条。 
  • fill()    ——    使用fillStyle填充已经完成的路径
  • stroke()    ——    使用strokeStyle为已经完成的路径描边

5.1、绘制线段

        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象

            context.beginPath();        //开始绘制新路径
            context.moveTo(50, 50);     //把画笔移动到指定的坐标
            context.lineTo(200, 50);    //绘制一条从当前位置到指定坐标(200, 50)的直线
            context.stroke();           //绘制
        }

5.2、绘制三角形

    绘制三角形边框:

        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象

            context.beginPath();        //开始绘制新路径
            context.moveTo(50, 50);     //把画笔移动到指定的坐标
            context.lineTo(200, 50);    //绘制一条从坐标(50, 50)到坐标(200, 50)的直线
            context.lineTo(200, 200);   //绘制一条从坐标(200, 50)到坐标(200, 200)的直线
            context.closePath();        //闭合路径,绘制一条从路径起点到路径终点的直线
            context.stroke()            //为路径描边
        }

JavaScript的Canvas绘图_第4张图片

    填充三角形:

        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象

            context.beginPath();        //开始绘制新路径
            context.moveTo(50, 50);     //把画笔移动到指定的坐标
            context.lineTo(200, 50);    //绘制一条从坐标(50, 50)到坐标(200, 50)的直线
            context.lineTo(200, 200);   //绘制一条从坐标(200, 50)到坐标(200, 200)的直线
            context.closePath();        //闭合路径,绘制一条从路径起点到路径终点的直线
            context.fill()              //填充三角形
        }

JavaScript的Canvas绘图_第5张图片

5.3、绘制圆弧

        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象

            context.beginPath();        //开始绘制新路径
            context.arc(100, 100, 99, 0, Math.PI, false);   
            context.stroke();
        }

JavaScript的Canvas绘图_第6张图片

5.4、绘制贝塞尔曲线

    二次贝塞尔曲线:

JavaScript的Canvas绘图_第7张图片

        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象

            context.beginPath();
            context.moveTo(10, 200);    //起始点
            var x1 = 40, y1 = 100;      //控制点
            var x2 = 200, y2 = 200;     //结束点
            //绘制贝塞尔曲线
            context.quadraticCurveTo(x1, y1, x2, y2);
            context.stroke();

            context.beginPath();
            context.rect(10, 200, 10, 10);
            context.rect(x1, y1, 10, 10);
            context.rect(x2, y2, 10, 10);
            context.fill();

        }

JavaScript的Canvas绘图_第8张图片

    三次贝塞尔曲线:

JavaScript的Canvas绘图_第9张图片

        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象

            context.beginPath();
            context.moveTo(40, 200);    //起始点
            var x1 = 20, y1 = 100;      //控制点1
            var x2 = 100, y2 = 120;     //控制点2
            var x3 = 200, y3 = 200;      //结束点
            //绘制三次贝塞尔曲线
            context.bezierCurveTo(x1, y1, x2, y2, x3, y3);
            context.stroke();

            context.beginPath();
            context.rect(40, 200, 10, 10);
            context.rect(x1, y1, 10, 10);
            context.rect(x2, y2, 10, 10);
            context.rect(x3, y3, 10, 10);
            context.fill();
        }

JavaScript的Canvas绘图_第10张图片

5.5、线条样式

    lineWidth属性用于设置线宽

        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象

            context.beginPath();
            context.moveTo(10, 10);
            context.lineTo(100, 10);
            context.lineWidth = 10;
            context.stroke();

            context.beginPath();
            context.moveTo(110, 10);
            context.lineTo(160, 10);
            context.lineWidth = 20;
            context.stroke();
        }

JavaScript的Canvas绘图_第11张图片

    lineCap属性用于设置线条末端样式,可以设置为三个值:

  • butt    ——    线段末端为方形
  • round    ——    线段末端以圆形结束
  • square    ——    线段末端以方形结束,但是增加了一个宽度和线段相同,高度是线段厚度一半的矩形区域。
        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象
            
            var lineCaps = ["butt", "round", "square"]
            for(var i = 0; i < 3; i++){
                context.beginPath();
                context.moveTo(20 + 30 * i, 30);
                context.lineTo(20 + 30 * i, 100);
                context.lineWidth = 20;
                context.lineCap = lineCaps[i];
                context.stroke();
            }

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

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

            context.strokeStyle = "red";
            context.lineWidth = 1;
            context.stroke();
        }

JavaScript的Canvas绘图_第12张图片

    lineJoin属性用于设置线条与线条间接合处的样式,可以设置为三个值:

  • round    ——    通过填充一个额外的,圆心在相连部分末端的扇形,绘制拐角的形状。圆角的半径是线段的宽度。
  • bevel    ——    在相连部分的末端填充一个额外的以三角形为底的区域,每个部分都有各自独立的矩形拐角。
  • miter(默认)    ——    通过延沈相连部分的外边缘,使其相交于一点,形成一个额外的菱形区域。
        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象
            
            var lineJoin = ['round', 'bevel', 'miter'];
            context.lineWidth = 20;

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

六、透明度

    globalAlpha属性用于指定所有绘制的透明度,默认值为0。

    示例:

        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象

            //绘制红色矩形
            context.fillStyle = "#F00";
            context.fillRect(10, 10, 50, 50);

            //修改全局透明度
            context.globalAlpha = 0.5;

            //绘制蓝色矩形
            context.fillStyle = "rgba(0, 0, 255, 1)";
            context.fillRect(30, 30, 50, 50);

            //重置全局透明度
            context.globalAlpha = 0;
  
        }

JavaScript的Canvas绘图_第13张图片

 

七、变换

7.1、translate()

    translate(x, y)用于将坐标原点移动到(x, y),执行这个变换后,坐标(0, 0)会变成之前由(x, y)表示的点。

JavaScript的Canvas绘图_第14张图片

    示例

        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象

            //开始路径
            context.beginPath();

            //绘制外圆
            context.arc(100, 100, 99, 0, 2 * Math.PI, false);

            //绘制内圆
            context.moveTo(194, 100);
            context.arc(100, 100, 94, 0, 2 * Math.PI, false);

            //变换原点
            context.translate(100, 100);

            //绘制分针
            context.moveTo(0, 0);
            context.lineTo(0, -85);

            //绘制时针
            context.moveTo(0, 0);
            context.lineTo(-65, 0);

            //描边路径
            context.stroke();
  
        }

JavaScript的Canvas绘图_第15张图片

7.2、rotate(angle)

    rotate(angle)方法能够旋转坐标轴。

JavaScript的Canvas绘图_第16张图片

    示例

        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象

            //开始路径
            context.beginPath();

            //绘制外圆
            context.arc(100, 100, 99, 0, 2 * Math.PI, false);

            //绘制内圆
            context.moveTo(194, 100);
            context.arc(100, 100, 94, 0, 2 * Math.PI, false);

            //变换原点
            context.translate(100, 100);

            //旋转表针
            context.rotate(Math.PI / 6);

            //绘制分针
            context.moveTo(0, 0);
            context.lineTo(0, -85);

            //绘制时针
            context.moveTo(0, 0);
            context.lineTo(-65, 0);

            //描边路径
            context.stroke();
  
        }

JavaScript的Canvas绘图_第17张图片

7.3、scale(scaleX, scaleY)  

    scale(scaleX, scaleY)方法用于缩放图像,在x方向乘以scaleX,在y方向乘以scaleY

    scaleXscaleY的默认值都是1.0

    示例

        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象

            //开始路径
            context.beginPath();

            //绘制外圆
            context.arc(100, 100, 99, 0, 2 * Math.PI, false);

            //绘制内圆
            context.moveTo(194, 100);
            context.arc(100, 100, 94, 0, 2 * Math.PI, false);

            //变换原点
            context.translate(100, 100);

            //旋转表针
            context.rotate(Math.PI / 6);

            //绘制分针
            context.moveTo(0, 0);
            context.lineTo(0, -85);

            //绘制时针
            context.moveTo(0, 0);
            context.lineTo(-65, 0);

            //放大路径
            context.scale(5, 5);

            //描边路径
            context.stroke();
  
        }

7.4、transform(a, b, c, d, e, f)

    直接修改变换矩阵,方式是乘以如下矩阵:

7.5、setTransform(a, b, c, d, e, f)

    将变换矩阵重置为默认状态,然后再调用transform()

八、save()和restore()

    调用save()方法,当时所有的设置都会进入一个栈结构,得以妥善保管。

    然后可以对上下文进行其他修改,等想要回到之前保存的设置时,可以调用restore()方法,在保存设置的栈结构中向前返回一级,恢复之前的状态。

    连续调用save()可以把更多设置保存到栈结构中,之后再连续调用restore()则可以一级一级返回。

    示例:

        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象

            context.fillStyle = "#F00";
            context.save();

            context.fillStyle = "#0F0";
            context.translate(100, 100);
            context.save();

            context.fillStyle = "#00F";
            //从点(100, 100)开始绘制蓝色矩形
            context.fillRect(0, 0, 100, 200);   
            
            context.restore();
            //从点(110, 110)开始绘制绿色矩形
            context.fillRect(10, 10, 100, 200);

            context.restore();
            //从点(0, 0)开始绘制红色矩形
            context.fillRect(0, 0, 100, 200);
        }

JavaScript的Canvas绘图_第18张图片

九、绘制文本

    绘制文本主要有两个方法:

  • fillText()
  • strokeText()

    这两个方法都可以接收4个参数:要绘制的文本字符串、x坐标、y坐标和可选的最大像素宽度。

    这两个方法都以下列3个属性为基础:

  • font    ——    表示文本样式、大小及字体,用CSS中指定字体的格式来指定,例如"10px Arial"
  • textAlign    ——    表示文本对齐方式。可能的值有"start"、"end"、"left"、"right"和"center"
  • textBaseline    ——    表示文本的基线,可能的值有"top"、"hanging"、"middle"、"alphabetic"、"ideographic"、"bottom"

    示例

        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象
            
            //开始路径
            context.beginPath();

            //绘制分针
            context.moveTo(100, 100);
            context.lineTo(100, 15);

            //描边路径
            context.stroke();

            context.font = "bold 14px Arial";
            context.textAlign = "center";   
            context.textBaseline = "middle";
            context.fillText("12", 100, 20);

            //起点对齐
            context.textAlign = "start";
            context.fillText("12", 100, 40);

            //终点对齐
            context.textAlign = "end";
            context.strokeText("12", 100, 60);

    fillText()strokeText()方法都可以接收第四个参数,也就是文本的最大像素宽度。提供这个参数后,调用fillText()strokeText()时如果传入的字符串大于最大宽度,则绘制的文本字符的高度正确,但宽度会收缩以适应最大宽度。

十、绘制图像

    2D绘图上下文内置了对图像的支持,可以使用drawImage()方法。

    drawImage()有9个参数:要素绘制的图像、源图像的x坐标、源图像的y坐标、源图像的宽度、源图像的高度、目标图像的x坐标、目标图像的y坐标、目标图像的宽度、目标图像的高度。

    ①绘制图像简单示例

        var drawing = document.getElementById("drawing");

        var img = new Image();      //创建Image对象
        img.src = 'https://avatar.csdn.net/6/4/D/1_qq_35732147.jpg?1539065138'; //设置图片源

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象

            img.addEventListener("load", function(){
                context.drawImage(img, 0, 0);       //图像加载完之后才会执行这条语句
            },false);
            
        }

JavaScript的Canvas绘图_第19张图片

    使用DOM0级的Image对象可以在客户端预先加载图像,可以像使用元素一样使用Image对象,但无法将其添加到DOM树中。

    考虑到图片是从网络加载,所以应该保证图像加载完之后再调用drawImage()方法绘制图像。

    ②缩放图片简单示例:

        var drawing = document.getElementById("drawing");

        var img = new Image();      //创建Image对象
        img.src = 'https://avatar.csdn.net/6/4/D/1_qq_35732147.jpg?1539065138'; //设置图片源

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象

            img.addEventListener("load", function(){
                context.drawImage(img, 0, 0, 400, 400);       //图像加载完之后才会执行这条语句
            },false);
            
        }

JavaScript的Canvas绘图_第20张图片

    ③切片

JavaScript的Canvas绘图_第21张图片

    切片示例:

        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象

            var img = new Image();
            img.src = "https://avatar.csdn.net/6/4/D/1_qq_35732147.jpg?1539071828";

            img.addEventListener("load", function(){
                context.drawImage(img, 50, 50, 200, 200, 0, 0, 200, 200);
            }, false);
  
        }

JavaScript的Canvas绘图_第22张图片

十一、模式

    模式其实就是重复的图像,可以用来填充或描边图形。

    要创建一个新模式,可以调用createPattern()方法并传入两个参数:

  • HTML元素
  • 表示如何重复图像的字符串,这个参数的值与CSS的background-repeat属性值相同,包括"repeat"、"repeat-x"、"repeat-y"、"no-repeat"
        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象

            var img = new Image();
            img.src = "https://avatar.csdn.net/E/9/8/3_weixin_42058532.jpg";

            img.addEventListener("load", function(){
                var pattern = context.createPattern(img, "repeat");

                //绘制矩形
                context.fillStyle = pattern;
                context.fillRect(10, 10, 200, 200);
            }, false);
  
        }

JavaScript的Canvas绘图_第23张图片

十二、使用图像数据

    canvas操作图像数据使用的几个方法:

    ①getImageData()    ——    用于取得画布上指定矩形的像素数据。

    具体是这个方法会返回ImageData对象,ImageData对象中包含图像数据。

     getImageData()方法接收4个参数:

  • 要取得画面区域左上角的x坐标
  • 要取得画面区域左上角的y坐标
  • 要取得画面区域的像素宽度
  • 要取得画面区域的像素高度

    例如要取得左上角坐标为(10,5)、大小为50*50像素的区域的图像数据:

        var imageData = context.getImageData(10, 5, 50, 50);

    返回的对象是ImageData的实例,每个ImageData对象都有三个属性:

  • width    ——    图像的宽度
  • height    ——    图像的高度
  • data    ——    保存图像中每一个像素的数据的数组,每一个像素用4个元素来保存,分别表示红、绿、蓝和透明度值。

    ②putImageData()    ——    把图像数据(从指定的ImageData对象)放回画布上。

    这个方法接收以下参数:

    JavaScript的Canvas绘图_第24张图片

    下面的代码通过getImageData()取得画布上指定矩形的像素数据,然后通过putImageData()将图像数据放回画布:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="green";
ctx.fillRect(10,10,50,50);

var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);

    ③createImageData()    ——    创建新的、空白的ImageData对象

    这个方法接收的参数:

JavaScript的Canvas绘图_第25张图片

    以下代码创建100*100像素的ImageData对象,其中每个像素都是红色的,然后把它放到画布上:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.createImageData(100,100);
for (var i=0;i

    效果:

JavaScript的Canvas绘图_第26张图片

    示例

    创建一个简单的灰阶过滤器:

        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象

            var image = new Image();
            image.src = "liyangqiao.jpg";

            image.addEventListener("load", function(event){
                var red, green, blue, alpha, average;

                //绘制原始图像
                context.drawImage(image, 0, 0);

                //取得图像数据
                imageData = context.getImageData(0, 0, image.width, image.height);
                data = imageData.data;
                
                for(var i = 0, len = data.length; i < len; i += 4){
                    red = data[i];
                    green = data[i + 1];
                    blue = data[i + 2];
                    alpha = data[i + 3];
                    
                    //求得rgb平均值
                    average = Math.floor((red + green + blue) / 3);

                    //设置颜色值,透明度不变
                    data[i] = average;
                    data[i + 1] = average;
                    data[i + 2] = average;
                }

                //回写图像数据并显示结果
                imageData.data = data;
                context.putImageData(imageData, 0, 0);
            }, false);
  
        }

JavaScript的Canvas绘图_第27张图片

    注意只有在画布“干净”的情况下(即图像并非来自其他域),才可以取得图像数据。如果画布”不干净“,那么访问图像数据时会导致JavaScript错误。

十三、阴影

    2D上下文会根据以下几个属性的值,自动为形状或路径绘制出阴影。

  • shadowColor    ——    用CSS颜色格式表示的阴影颜色,默认为黑色。
  • shadowOffsetX    ——    形状或路径x轴方向的阴影偏移量,默认为0。
  • shadowOffsetY    ——    形状或路径y轴方向的阴影偏移量,默认为0。
  • shadowBlur    ——    模糊的像素数,默认0,即不模糊。
        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象

            //设置阴影
            context.shadowOffsetX = 5;
            context.shadowOffsetY = 5;
            context.shadowBlur = 5;
            context.shadowColor = "rgba(0, 0, 0, 0.5)";

            //绘制红色矩形
            context.fillStyle = "#F00";
            context.fillRect(10, 10, 50, 50);

            //绘制蓝色矩形
            context.fillStyle = "rgba(0, 0, 255, 1)";
            context.fillRect(30, 30, 50, 50);
            
        }

JavaScript的Canvas绘图_第28张图片

十四、渐变

    渐变由CanvasGradient实例表示,很容易通过2D上下文来创建和修改。

    要创建一个新的线性渐变对象,可以调用createLinearGradient()方法。

    这个方法接受4个参数:起点的x坐标、起点的y坐标、终点的x坐标、终点的y坐标。

    创建了渐变对象后,下一步就是使用addColorStop()方法来指定色标。

    这个方法接收两个参数:色标位置和CSS颜色值。色标位置是一个0(开始的颜色)到1(结束的颜色)之间的数字。

    示例:

        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象

            var gradient = context.createLinearGradient(30, 30, 70, 70);

            gradient.addColorStop(0, "white");
            gradient.addColorStop(1, "black");

            //绘制红色矩形
            context.fillStyle = "#ff0000";
            context.fillRect(10, 10, 50, 50);

            //绘制渐变矩形
            context.fillStyle = gradient;
            context.fillRect(30, 30, 50, 50);
  
        }

JavaScript的Canvas绘图_第29张图片

    要创建径向渐变(或放射性渐变),可以使用createRadialGradient()方法。

    这个方法接收6个参数,对应着两个圆的圆心和半径。前三个参数指定的是起点圆的圆心和半径,后三个参数指定的是终点圆的圆心和半径。

    示例

        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象

            var gradient = context.createRadialGradient(55, 55, 10, 55, 55, 30);

            gradient.addColorStop(0, "white");
            gradient.addColorStop(1, "black");

            //绘制红色矩形
            context.fillStyle = "#ff0000";
            context.fillRect(10, 10, 50, 50);

            //绘制渐变矩形
            context.fillStyle = gradient;
            context.fillRect(30, 30, 50, 50);
  
        }

JavaScript的Canvas绘图_第30张图片

十五、合成

    globalCompositionOperation属性表示后绘制的图形怎样与先绘制的图形结合。

    这个属性的值是字符串,可能的值如下:

  • source-over(默认值)    ——    后绘制的图形位于先绘制的图形上方
  • source-in    ——    后绘制的图形与先绘制的图形重叠的部分可见,两者其他部分完全透明
  • source-out    ——    后绘制的图形与先绘制的图形不重叠的部分可见,先绘制的图形完全透明
  • source-atop    ——    后绘制的图形与先绘制的图形重叠部分可见,先绘制图形不受影响
  • destination-over    ——    后绘制的图形位于先绘制的图形下方,只有之前透明像素下的部分才可见
  • destination-in    ——    后绘制的图形位于先绘制的图形下方,两者不重叠的部分完全透明
  • destination-out    ——    后绘制的图形擦除与先绘制的图形重叠的部分
  • destination-atop    ——    后绘制的图形位于先绘制的图形下方,在两者不重叠的地方,先绘制的图形会变透明
  • lighter    ——    后绘制的图形与先绘制的图形重叠部分的值相加,使该部分变亮
  • copy    ——    后绘制的图形完全替代与之重叠的先绘制图形
  • xor    ——    后绘制的图形与先绘制的图形重叠的部分执行“异或”操作

    ①source-over(默认值)

        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象

            context.globalCompositeOperation = "source-over";

            //绘制红色矩形
            context.fillStyle = "#F00";
            context.fillRect(10, 10, 50, 50);

            //绘制蓝色矩形
            context.fillStyle = "rgba(0, 0, 255, 1)";
            context.fillRect(30, 30, 50, 50);
        }

JavaScript的Canvas绘图_第31张图片

    ②source-in

        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象

            //绘制红色矩形
            context.fillStyle = "#F00";
            context.fillRect(10, 10, 50, 50);

            context.globalCompositeOperation = "source-in";

            //绘制蓝色矩形
            context.fillStyle = "rgba(0, 0, 255, 1)";
            context.fillRect(30, 30, 50, 50);
        }

JavaScript的Canvas绘图_第32张图片

    ③source-out

        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象

            //绘制红色矩形
            context.fillStyle = "#F00";
            context.fillRect(10, 10, 50, 50);

            context.globalCompositeOperation = "source-out";

            //绘制蓝色矩形
            context.fillStyle = "rgba(0, 0, 255, 1)";
            context.fillRect(30, 30, 50, 50);
        }

JavaScript的Canvas绘图_第33张图片

    ④source-atop

        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象

            //绘制红色矩形
            context.fillStyle = "#F00";
            context.fillRect(10, 10, 50, 50);

            context.globalCompositeOperation = "source-atop";

            //绘制蓝色矩形
            context.fillStyle = "rgba(0, 0, 255, 1)";
            context.fillRect(30, 30, 50, 50);
        }

JavaScript的Canvas绘图_第34张图片

    ⑤destination-over

        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象

            //绘制红色矩形
            context.fillStyle = "#F00";
            context.fillRect(10, 10, 50, 50);

            context.globalCompositeOperation = "destination-over";

            //绘制蓝色矩形
            context.fillStyle = "rgba(0, 0, 255, 1)";
            context.fillRect(30, 30, 50, 50);
        }

JavaScript的Canvas绘图_第35张图片

    ⑥destination-in

        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象

            //绘制红色矩形
            context.fillStyle = "#F00";
            context.fillRect(10, 10, 50, 50);

            context.globalCompositeOperation = "destination-in";

            //绘制蓝色矩形
            context.fillStyle = "rgba(0, 0, 255, 1)";
            context.fillRect(30, 30, 50, 50);
        }

JavaScript的Canvas绘图_第36张图片

    ⑦destination-out

        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象

            //绘制红色矩形
            context.fillStyle = "#F00";
            context.fillRect(10, 10, 50, 50);

            context.globalCompositeOperation = "destination-out";

            //绘制蓝色矩形
            context.fillStyle = "rgba(0, 0, 255, 1)";
            context.fillRect(30, 30, 50, 50);
        }

JavaScript的Canvas绘图_第37张图片

    ⑧destination-atop

        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象

            //绘制红色矩形
            context.fillStyle = "#F00";
            context.fillRect(10, 10, 50, 50);

            context.globalCompositeOperation = "destination-atop";

            //绘制蓝色矩形
            context.fillStyle = "rgba(0, 0, 255, 1)";
            context.fillRect(30, 30, 50, 50);
        }

JavaScript的Canvas绘图_第38张图片

    ⑨lighter

        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象

            //绘制红色矩形
            context.fillStyle = "#F00";
            context.fillRect(10, 10, 50, 50);

            context.globalCompositeOperation = "lighter";

            //绘制蓝色矩形
            context.fillStyle = "rgba(0, 0, 255, 1)";
            context.fillRect(30, 30, 50, 50);
        }

JavaScript的Canvas绘图_第39张图片

    ⑩copy

        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象

            //绘制红色矩形
            context.fillStyle = "#F00";
            context.fillRect(10, 10, 50, 50);

            context.globalCompositeOperation = "copy";

            //绘制蓝色矩形
            context.fillStyle = "rgba(0, 0, 255, 1)";
            context.fillRect(30, 30, 50, 50);
        }

JavaScript的Canvas绘图_第40张图片

    ⑾xor

        var drawing = document.getElementById("drawing");

        //确定浏览器支持元素
        if(drawing.getContext){

            var context = drawing.getContext("2d"); //取得2D上下文对象

            //绘制红色矩形
            context.fillStyle = "#F00";
            context.fillRect(10, 10, 50, 50);

            context.globalCompositeOperation = "xor";

            //绘制蓝色矩形
            context.fillStyle = "rgba(0, 0, 255, 1)";
            context.fillRect(30, 30, 50, 50);
        }

十六、基本动画

16.1、动画的基本步骤

    ①清空canvas

    除非要画的内容会完全充满canvas(例如背景图),否则需要清空所有。

    最简单的做法就是用clearRect()方法。

    ②保存canvas状态

    如果要改变一些会改变canvas状态的设置(样式,变形之类的),又要在每画一帧之时都是原始状态的话,需要先保存一下。

    ③绘制动画图形

    这一步才是重绘动画帧

    ④恢复canvas状态

    如果已经保存了canvas的状态,可以先恢复它,然后重绘下一帧。

16.2、操纵动画

    在canvas上绘制内容是用canvas提供的或者自定义的方法,而通常,我们仅仅在脚本执行结束后才能看见结果,比如说,在for循环里面做完成动画是不太可能的,因为for循环一直高速执行,动画都来不及绘制。

    因此,为了实现动画,我们需要一些可以定时执行重绘的方法。

    首先,可以用window.setInterval()window.setTimeout(),和window.requestAnimationFrame()来设定定期执行一个指定函数:

  • setInterval(function, delay)    ——    当设定好间隔时间后,function会定期执行
  • setTimeout(function, delay)    ——    在设定好的时间之后执行函数
  • requestAnimationFrame(callback)    ——    告诉浏览器希望执行一个动画,并在重绘之前,请求浏览器执行一个特定的函数来更新动画

    如果并不需要与用户互动,可以使用setInterval()方法,它就可以定期执行指定代码。

    如果需要做一个游戏,我们可以使用键盘或者鼠标事件配合上setTimeout()方法来实现。

    通过设置事件监听,可以捕捉用户的交互,并执行相应的动作。

16.3、太阳系的动画

    下面的例子,采用window.requestAnimationFrame()实现动画效果。

    这个方法提供了更加平缓并更加有效率的方式来执行动画,当系统准备好了重绘条件的时候,才调用绘制动画帧。

    一般每秒钟回调函数执行60次,也有可能会被降低。

    一个小型的太阳系模拟动画:

        var sun = new Image();
        var moon = new Image();
        var earth = new Image();
        function init(){
            sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
            moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
            earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
            window.requestAnimationFrame(draw);
        }
        
        function draw(){
            var ctx = document.getElementById("drawing").getContext('2d');
            
            //后绘制的图形位于先绘制的图形下方,只有之前透明像素下的部分才可见
            ctx.globalCompositeOperation = 'destination-over';
            ctx.clearRect(0, 0, 300, 300);    //clear canvas

            ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
            ctx.strokeStyle = 'rgba(0, 153, 255, 0.4)';
            ctx.save();
            //移动坐标原点
            ctx.translate(150, 150);

            // Earth
            var time = new Date();
            ctx.rotate( ((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds() );
            ctx.translate(105, 0);
            ctx.fillRect(0, -12, 50, 24);   //Shadow
            ctx.drawImage(earth, -12, -12);
            
            // Moon
            ctx.save();
            ctx.rotate( ((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds() );
            ctx.translate(0, 28.5);
            ctx.drawImage(moon, -3.5, -3.5);
            ctx.restore();
            
            ctx.restore();

            ctx.beginPath();
            ctx.arc(150, 150, 105, 0, Math.PI * 2, false);  // Earth orbit
            ctx.stroke();

            ctx.drawImage(sun, 0, 0, 300, 300);

            window.requestAnimationFrame(draw);

        }

        init();

JavaScript的Canvas绘图_第41张图片

 

你可能感兴趣的:(Javascript)