2023面试高手

这个屌丝很懒，什么也没留下！

热门标签

JavaScript的Canvas绘图_绘制从起点(-200,-50)到终点(200,-50)的1像素宽的水平黑色直线,并在其上方输出文

作者：2023面试高手 | 2024-03-29 00:47:33

踩

绘制从起点(-200,-50)到终点(200,-50)的1像素宽的水平黑色直线,并在其上方输出文

一、Canvas简介

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

<canvas>由几组API构成，除了具备基本绘图能力的2D上下文，<canvas>还具备一个名为WebGL的3D上下文。

二、Canvas基本用法

使用<canvas>元素之前，必须先设置其width和height属性，指定可以绘图的区域大小。

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

<canvas id="drawing" width="200" height="200">A drawing of something.</canvas>

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


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

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

2D上下文的坐标开始于<canvas>元素的左上角，原点坐标是（0,0）。

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

三、填充和描边

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

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

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

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


        var drawing = document.getElementById("drawing");
 
        //确定浏览器支持<canvas>元素
        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");
 
        //确定浏览器支持<canvas>元素
        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);
        }

示例2：


        var drawing = document.getElementById("drawing");
 
        //确定浏览器支持<canvas>元素
        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);
        }

示例3：


        var drawing = document.getElementById("drawing");
 
        //确定浏览器支持<canvas>元素
        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);
        }

五、绘制路径

绘制路径的方法：

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");
 
        //确定浏览器支持<canvas>元素
        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");
 
        //确定浏览器支持<canvas>元素
        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()            //为路径描边
        }

填充三角形：


        var drawing = document.getElementById("drawing");
 
        //确定浏览器支持<canvas>元素
        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()              //填充三角形
        }

5.3、绘制圆弧


        var drawing = document.getElementById("drawing");
 
        //确定浏览器支持<canvas>元素
        if(drawing.getContext){
 
            var context = drawing.getContext("2d"); //取得2D上下文对象
 
            context.beginPath();        //开始绘制新路径
            context.arc(100, 100, 99, 0, Math.PI, false);   
            context.stroke();
        }

5.4、绘制贝塞尔曲线

二次贝塞尔曲线：


        var drawing = document.getElementById("drawing");
 
        //确定浏览器支持<canvas>元素
        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();
 
        }

三次贝塞尔曲线：


        var drawing = document.getElementById("drawing");
 
        //确定浏览器支持<canvas>元素
        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();
        }

5.5、线条样式

lineWidth属性用于设置线宽


        var drawing = document.getElementById("drawing");
 
        //确定浏览器支持<canvas>元素
        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();
        }

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

butt —— 线段末端为方形
round —— 线段末端以圆形结束
square —— 线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。


        var drawing = document.getElementById("drawing");
 
        //确定浏览器支持<canvas>元素
        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();
        }

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

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


        var drawing = document.getElementById("drawing");
 
        //确定浏览器支持<canvas>元素
        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");
 
        //确定浏览器支持<canvas>元素
        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;
  
        }

七、变换

7.1、translate()

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

示例：


        var drawing = document.getElementById("drawing");
 
        //确定浏览器支持<canvas>元素
        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();
  
        }

7.2、rotate(angle)

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

示例：


        var drawing = document.getElementById("drawing");
 
        //确定浏览器支持<canvas>元素
        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();
  
        }

7.3、scale(scaleX, scaleY)

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

scaleX和scaleY的默认值都是1.0

示例：


        var drawing = document.getElementById("drawing");
 
        //确定浏览器支持<canvas>元素
        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");
 
        //确定浏览器支持<canvas>元素
        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);
        }

九、绘制文本

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

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");
 
        //确定浏览器支持<canvas>元素
        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'; //设置图片源
 
        //确定浏览器支持<canvas>元素
        if(drawing.getContext){
 
            var context = drawing.getContext("2d"); //取得2D上下文对象
 
            img.addEventListener("load", function(){
                context.drawImage(img, 0, 0);       //图像加载完之后才会执行这条语句
            },false);
            
        }

使用DOM0级的Image对象可以在客户端预先加载图像，可以像使用<img>元素一样使用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'; //设置图片源
 
        //确定浏览器支持<canvas>元素
        if(drawing.getContext){
 
            var context = drawing.getContext("2d"); //取得2D上下文对象
 
            img.addEventListener("load", function(){
                context.drawImage(img, 0, 0, 400, 400);       //图像加载完之后才会执行这条语句
            },false);
            
        }

③切片

切片示例：


        var drawing = document.getElementById("drawing");
 
        //确定浏览器支持<canvas>元素
        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);
  
        }

十一、模式

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

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

HTML<img>元素
表示如何重复图像的字符串，这个参数的值与CSS的background-repeat属性值相同，包括"repeat"、"repeat-x"、"repeat-y"、"no-repeat"


        var drawing = document.getElementById("drawing");
 
        //确定浏览器支持<canvas>元素
        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);
  
        }

十二、使用图像数据

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对象）放回画布上。

这个方法接收以下参数：

下面的代码通过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对象

这个方法接收的参数：

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


var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.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;
  }
ctx.putImageData(imgData,10,10);

效果：

示例：

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


        var drawing = document.getElementById("drawing");
 
        //确定浏览器支持<canvas>元素
        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错误。

十三、阴影

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

shadowColor —— 用CSS颜色格式表示的阴影颜色，默认为黑色。
shadowOffsetX —— 形状或路径x轴方向的阴影偏移量，默认为0。
shadowOffsetY —— 形状或路径y轴方向的阴影偏移量，默认为0。
shadowBlur —— 模糊的像素数，默认0，即不模糊。


        var drawing = document.getElementById("drawing");
 
        //确定浏览器支持<canvas>元素
        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);
            
        }

十四、渐变

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

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

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

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

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

示例：


        var drawing = document.getElementById("drawing");
 
        //确定浏览器支持<canvas>元素
        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);
  
        }

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

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

示例：


        var drawing = document.getElementById("drawing");
 
        //确定浏览器支持<canvas>元素
        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);
  
        }

十五、合成

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");
 
        //确定浏览器支持<canvas>元素
        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);
        }

②source-in


        var drawing = document.getElementById("drawing");
 
        //确定浏览器支持<canvas>元素
        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);
        }

③source-out


        var drawing = document.getElementById("drawing");
 
        //确定浏览器支持<canvas>元素
        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);
        }

④source-atop


        var drawing = document.getElementById("drawing");
 
        //确定浏览器支持<canvas>元素
        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);
        }

⑤destination-over


        var drawing = document.getElementById("drawing");
 
        //确定浏览器支持<canvas>元素
        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);
        }

⑥destination-in


        var drawing = document.getElementById("drawing");
 
        //确定浏览器支持<canvas>元素
        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);
        }

⑦destination-out


        var drawing = document.getElementById("drawing");
 
        //确定浏览器支持<canvas>元素
        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);
        }

⑧destination-atop


        var drawing = document.getElementById("drawing");
 
        //确定浏览器支持<canvas>元素
        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);
        }

⑨lighter


        var drawing = document.getElementById("drawing");
 
        //确定浏览器支持<canvas>元素
        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);
        }

⑩copy


        var drawing = document.getElementById("drawing");
 
        //确定浏览器支持<canvas>元素
        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);
        }

⑾xor


        var drawing = document.getElementById("drawing");
 
        //确定浏览器支持<canvas>元素
        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();

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/332603