HTML5绘制图形

最新推荐文章于 2024-05-14 22:49:55 发布

而又何羡乎

最新推荐文章于 2024-05-14 22:49:55 发布

阅读量2.3k

点赞数

分类专栏： WEB前端学习文章标签： html5

本文链接：https://blog.csdn.net/qq_44285092/article/details/108722481

版权

WEB前端学习专栏收录该内容

12 篇文章 4 订阅

订阅专栏

1 什么是canvas

canvas是一个HTML新元素，可被JavaScript语言来绘制图形。HTML5中，canvas标签是一个矩形区域，包含了width和height，都可以通过CSS来定义，其默认值为300px和150px。在网页中使用的形式如下：

<canvas id="mycanvas" width="300" height="200" style="border:1px solid #c3c3c3">
Your browser doesn't support the canvas element.
</canvas>

属性值	说明
id	画布对象名称
width	宽度
height	高度
style	CSS样式，表示画布的样式

画布canvas本身不具有绘制图形的功能，只是一个容器。但我们放置好canvas画布元素，我们就可以使用脚本语言JavaScript在网页上绘制图像，使用JavaScript来绘制图形的步骤如下：

① JavaScript使用id来寻找canvas元素，即获取当前画布对象：

var c = document.getElementById("mycanvas")

② 创建context对象：

var cxt = c.getContext("2d")

getContext方法返回的是一个指定的contextId的上下文对象，若指定的id不被支持，则返回null，当前被强制必须支持的是2D，将来会有3D，注意id大小写敏感。对象cxt建立后，就可以拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

③ 绘制图形：

cxt.fillStyle = "#FF0000";
cxt.fillRect(0,0,150,75)

fillStyle方法将其染成红色，fillRect方法规定了形状、位置和尺寸。此为绘制红色矩形的代码。

2 绘制基本形状

2.1 绘制矩形

单独的canvas标记只是在页面中定义了一块矩形区域，需要配合JavaScript脚本才能绘制各种图形、线条和其它复杂的图形。与SVG来实现同样绘图效果来比较，canvas是像素级别的绘图技术，SVG是一种矢量的绘图技术。

canvas绘制矩形的方法
方法	说明
fillStyle	用于设定填充的颜色，透明度等。rgb不可透明，rgba课透明
fillRect	绘制一个矩形，无边框，只有填充色。这个方法有四个参数，前两个参数表示左上角的坐标位置，第三个为长度，第四个为高度
strokeRect	绘制一个边框的矩形，有四个参数，使用方法同上
clearRect	清除一个矩形区域，被清除的区域将无任何线条，有四个参数，使用方法同上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制矩形</title>
</head>
<body>
<canvas id="juxing" width="300" height="200" style="border:1px solid blue">
    Your browser doesn't support the canvas element.
</canvas>
<script type="text/javascript">
    var c = document.getElementById("juxing");
    var cxt = c.getContext("2d");
    cxt.fillStyle = "rgba(200,0,0,0.5)";
    cxt.fillRect(10,20,100,100);
</script>
</body>
</html>

2.2 绘制圆形

基于canvas绘图并不是直接在canvas标记说创建的绘图画面上进行各种绘图操作，而是依赖画面提供的渲染上下文，所有的绘图命令和属性都定义在渲染下文中。渲染上下文与canvas一一对应，无论对同一canvas对象调用几次getContext()方法，都将返回同一个上下文对象。

canvas绘制圆形的方法
方法	说明
fillStyle	用于设定填充的颜色，透明度等。rgb不可透明，rgba课透明
beginPath()	开始绘制路径
arc(x,y,radius,startAngle,endAngle,anticlockwise)	x和y定义圆的原点；radius是圆的半径；startAngle和endAngle定义开始弧度和结束弧度；anticlockwise用来定义画圆的方向，值为true和false
closePath()	结束路径的绘制
fill()	进行填充
stroke()	设置边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制矩形</title>
</head>
<body>
<canvas id="juxing" width="300" height="200" style="border:1px solid blue">
    Your browser doesn't support the canvas element.
</canvas>
<script type="text/javascript">
    var c = document.getElementById("juxing");
    var cxt = c.getContext("2d");
    cxt.fillStyle = "rgba(00,300,200,0.5)";
    cxt.beginPath();
    cxt.arc(70,70,50,0,Math.PI*2,true);
    cxt.closePath();
    cxt.fill();
    cxt.stroke();
</script>
</body>
</html>

2.3 使用moveTo与lineTo绘制直线

每个canvas实例对象中都有以一个path对象，创建自定义图形的过程就是不断对path对象进行操作的过程。每当开始一次新的图形绘制任务，都需要先使用begainPath()方法来重置path对象至初始状态，进而通过一系列对moveTo/lineTo等划线方法的调用，绘制出期望的路径，moveTo(x,y)方法设置绘图起始坐标，lineTo(x,y)等划线方法可以从当前起点绘制直线、圆弧和曲线到目标位置。最后调用（可选）closePath()方法将自定义图形进行闭合，该方法将自动创建一条从当前坐标到起始坐标的直线。

canvas绘制直线的方法
方法	说明
moveTo(x,y)	不绘制，只是将当前位置移动到性目标坐标(x,y)，作为线条开始点
lineTo(x,y)	从设置的开始点绘制到指定的目标坐标(x,y)，并在两坐标之间画一条直线。无论调用哪一个，都不会真正的绘制出图形，因为还未调用stroke(绘制)和fill(填充)。只是定义路径的位置，以便绘制时调用。
strockStyle	指定线条的颜色
lineWidth	设置线条的粗细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制矩形</title>
</head>
<body>
<canvas id="juxing" width="800" height="600" style="border:1px solid blue">
    Your browser doesn't support the canvas element.
</canvas>
<script type="text/javascript">
    var c = document.getElementById("juxing");
    var cxt = c.getContext("2d");
    cxt.beginPath();
    cxt.strokeStyle = "rgb(0,182,3)";
    cxt.moveTo(200,150);
    cxt.lineTo(400,450);
    cxt.lineTo(600,150);
    cxt.lineWidth = 20;
    cxt.stroke();
    cxt.closePath();
    cxt.fillStyle = "red"
    cxt.fill();
</script>
</body>
</html>

2.4 使用bezierCurveTo绘制贝济埃曲线

bezierCurveTo用法：

bezierCruveTo(cpx1,cpy1,cpx2,cpy2,x,y)

参数	描述
cpx1,cpy1	和曲线的开始点(当前位置点)相关联的控制点的坐标
cpx2,cpy2	和曲线结束点相关联控制点的坐标
x,y	曲线结束点的坐标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贝济埃曲线的绘制</title>
    <script>
        function draw(id)
        {
            var canvas = document.getElementById(id);
            if (canvas == null)
                return false;
            var context = canvas.getContext("2d");
            context.fillStyle = "#eeeeff";
            context.fillRect(0,0,400,300);
            var n = 0;
            var dx = 150;
            var dy = 150;
            var s = 100;
            context.beginPath();
            context.globalCompositeOperation = "and";
            context.fillStyle = 'rgb(300,255,0)';
            context.strokeStyle = "rgb(0,0,100)";
            var x = Math.sin(0);
            var y = Math.cos(0);
            var dig = Math.PI / 15 * 11;
            for (var i = 0;i<30;i++)
            {
                var x = Math.sin(i*dig);
                var y = Math.cos(i*dig);
                context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s);
            }
            context.closePath();
            context.fill();
            context.stroke();
        }
    </script>
</head>
<body onload="draw('canvas');">
<h1>绘制元素</h1>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

3 绘制渐变图形

渐变是两种或者更多颜色的平滑过渡，是指在颜色集上使用逐步抽布的算法，并将结果应用于描边样式和填充样式中。canvas的绘图支持线性渐变与放射性渐变（径向渐变）。

3.1 绘制线性渐变

① 创建渐变对象

var grandient = cxt.createLinearGradient(0,0,0,canvas.height);

② 为创建渐变对象设置颜色（也可以设置alpha值，设置透明度），指明过渡方式

gradient.addColorStop(0,"#fff");
gradient.addColorStop(1,"#000");

③ 在context上为填充样式或者描边设置渐变

cxt.fillStyle = gradient;

绘制线性渐变的方法
方法	功能
addColorStop	函数允许设置两个参数：偏移量和颜色。偏移量是一个由0.0到1.0之间的数值，代表沿着渐变线渐变的距离有多远。颜色参数是在偏移位置或填充时所使用的颜色
createLinearGradient(x0,y0,x1,y1)	沿着直线从(x0,y0)至(x1,y1)绘制渐变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LinearGradient</title>
</head>
<body>
<h2 align="center" style="color: #1B85E2">绘制线性渐变</h2>
<canvas id="cc" width="400" height="300" style="border:1px solid orangered"></canvas>
<script type="text/javascript">
    var c = document.getElementById("cc");
    var cxt = c.getContext("2d");
    var gradient = cxt.createLinearGradient(0,0,0,cc.height);
    gradient.addColorStop(0,"#fff");
    gradient.addColorStop(1,"rgba(255,0,0,0.5)");
    cxt.fillStyle = gradient;
    cxt.fillRect(0,0,400,300)
</script>
</body>
</html>

3.2 绘制径向渐变

与线性不同之处在于实现径向渐变用createRadialGradient(x0,y0,r0,x1,y1,r1)来实现两个圆之间的锥面绘制渐变。其中前三个参数代表开始的圆，圆心为(x0,y0)，半径为(r0)；后三个参数代表结束的圆，圆心为(x1,y1)，半径为r1。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LinearGradient</title>
</head>
<body>
<h2 align="center" style="color: #1B85E2">绘制线性渐变</h2>
<canvas id="cc" width="400" height="300" style="border:1px solid orangered"></canvas>
<script type="text/javascript">
    var c = document.getElementById("cc");
    var cxt = c.getContext("2d");
    var gradient = cxt.createRadialGradient(cc.width/2,cc.height/2,0,cc.width/2,cc.height/2,200);
    gradient.addColorStop(0,"#fff");
    gradient.addColorStop(1,"rgba(255,0,0,1)");
    cxt.fillStyle = gradient;
    cxt.fillRect(0,0,400,400)
</script>
</body>
</html>

4 绘制变形图形

4.1 变换原点坐标

平移（translate），将绘图区相对于当前画布的左上角进行平移，若不进行变形，绘图区的原点和画布原点是重合的。若果进行变形，这坐标位置会移动到一个新位置。用translate(x,y)实现在平面上平移，其原来的原点的，然后偏移的位置为坐标原点。即原来的点为(10,10)，translate(10,10)后的坐标原点就在(20,20)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变换原点坐标</title>
    <script>
        function draw(id)
        {
            var canvas = document.getElementById(id);
            if (canvas == null)
                return false;
            var context = canvas.getContext("2d");
            context.fillStyle = "#eeeeff";
            context.fillRect(0,0,400,300);
            context.translate(200,50);
            context.fillStyle = 'rgba(255,0,0,0.25)';
            for (var i=0;i<50;i++){
                context.translate(25,25);
                context.fillRect(0,0,100,50);
            }
        }
    </script>
</head>
<!--cc双引号出错？why？-->
<body onload="draw('cc')">
<h1 align="center" style="color: red">变换原点坐标</h1>
<canvas id="cc" width="400" height="300"></canvas>
</body>
</html>

4.2 图形缩放

图形缩放就是对图像的宽和高的调整，通过使用scale(x,y)函数来实现缩放，如当x=2时，表示将绘制的图像中全部元素都会变成2倍宽；当y=0.5，则会变为之前的一半高。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变换原点坐标</title>
    <script>
        function draw(id)
        {
            var canvas = document.getElementById(id);
            if (canvas == null)
                return false;
            var context = canvas.getContext("2d");
            context.fillStyle = "#eeeeff";
            context.fillRect(0,0,400,300);
            context.translate(200,50);
            context.fillStyle = 'rgba(255,0,0,0.25)';
            for (var i=0;i<50;i++){
                context.scale(2,0.8);
                context.fillRect(0,0,100,50);
            }
        }
    </script>
</head>
<!--cc双引号出错？why？-->
<body onload="draw('cc')">
<h1 align="center" style="color: red">变换原点坐标</h1>
<canvas id="cc" width="400" height="300"></canvas>
</body>
</html>

4.3 旋转图形

rotate(弧度)，默认从左上端的(0,0)开始旋转，通过制定一个角度改变了画布的坐标和浏览器元素的映射，使任意后续会与在画布中都显示为选装的，并没有旋转canvas元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变换原点坐标</title>
    <script>
        function draw(id)
        {
            var canvas = document.getElementById(id);
            if (canvas == null)
                return false;
            var context = canvas.getContext("2d");
            context.fillStyle = "#eeeeff";
            context.fillRect(0,0,400,300);
            context.translate(200,50);
            context.fillStyle = 'rgba(255,0,0,0.25)';
            for (var i=0;i<50;i++){
                context.rotate(Math.PI / 4);
                context.fillRect(0,0,10,50);
            }
        }
    </script>
</head>
<!--cc双引号出错？why？-->
<body onload="draw('cc')">
<h1 align="center" style="color: red">变换原点坐标</h1>
<canvas id="cc" width="400" height="300"></canvas>
</body>
</html>

5 绘制其它样式的图形

5.1 图形组合

globalCompositeOperation = type的方法
type方法	说明
source-over(默认）	默认设置，新图形会覆盖在原有内容上
destination	会在原有内容之下绘制新图形
source-in	新图形会仅仅出现与原有内容重叠的部分，其余区域变为透明
destination-in	原有内容中与新图形重叠的部分会被保留，其余区域会变为透明。同上相反
source-out	结果只有新图形与原有图形不重叠的部分会被绘制出来
destination-out	原有内容与新图形不重叠的部分会被保留
source-atop	新图形与原有内容重叠的部分会被绘制，并覆盖于原有内容之上
destination-atop	原有内容与新内容重叠部分会被保留，并会在原有内容之下绘制新图形
lighter	两图形中重叠的部分会做加色处理
darker	两图形重叠的部分会做减色处理
xor	重叠的部分会变为透明
copy	只有新图形会被保留，其余都会被清除

```html Title ```

5.2 绘制带阴影的图形

阴影效果属性介绍
属性	说明
shadowOffsetX	设置阴影x偏移量（水平），单位是px
shadowOffsetY	设置阴影y偏移量（垂直），单位是px
shadowColor	设置阴影颜色
shadowBlur	设置阴影模糊程度，值越大阴影则越模糊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置阴影效果</title>
</head>
<body>
<canvas id = "yinying" height="400" width="400" style="border:1px solid red"></canvas>
<script type="text/javascript">
    var elem = document.getElementById('yinying');
    if (elem && elem.getContext){
        var context = elem.getContext('2d');
        context.shadowOffsetX = 15;
        context.shadowOffsetY = 15;
        context.shadowColor = "rgba(255,0,0,0.5)"
        context.shadowBlur = 10;
        context.fillStyle = "#f00";
        context.fillRect(100,100,200,200);
    }
</script>
</body>
</html>

5.3 绘制文字

绘制文字的方法
方法属性	说明
fillText(text,x,y,maxwidth)	绘制带fillStyle填充的文字(text)，指定文本位置的坐标参数x、y，maxwidth是可选的，用于限制字体的大小，它会将文字强制收缩
trkeText(text,x,y,maxwidth)	绘制只有strokeStyle边框的文字，其参数同上
measureText	该函数会返回一个度量对象，其包含了在当前context环境下指定的文本
额外属性	说明(保证正常显示)
font	可以是CSS字体规则中的任何值。包括字体样式、变种、大小、粗细、行高和字体名
textAlign	控制文本对齐方式，类似于CSS中的text-align，但不完全相同，取值有left、right、start、end和center
textBaseline	控制文本相对于起点的位置，取值有top、hanging、middle、alphabetic、ideogrphic和buttom（）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置阴影效果</title>
</head>
<body>
<canvas id = "yinying" height="400" width="400" style="border:1px solid red"></canvas>
<script type="text/javascript">
    var elem = document.getElementById('yinying');
    if (elem && elem.getContext){
        var context = elem.getContext('2d');
        context.fillStyle = "#f00";
        context.font = 'italic 30px 微软雅黑';
        context.textAlign = 'left';
        context.textBaseline = "top";
        context.fillText("生日快乐",20,20,50);
        context.font = "bold 30px sans-serif ";
        context.strokeText("生日快乐",50.50,100)
    }
</script>
</body>
</html>

6 使用图像

6.1 绘制图像

在canvas画布上绘制图像，需要先有一个图片，该图片可以是已经存在的img元素，也可以是通过js创建的图片。**无论是哪种方式，都需要在绘制之前，完全加载这张图片。**若果图片未完全加载之前就将其呈现在canvas上，那么canvas就不会显示任何图片。

drawImage绘制图像的方法
方法	说明
drawImage(image,dx,dy)	接受一个图片，并将其绘制在canvas中。给出的坐标(dx,dy)代表图片的左上角。(0,0)表示将图片从左上角开始绘制。
drawImage(image,dx,dy,dw,dh)	接受一个图片，并将其缩范围宽度dw和高度dh，然后把他绘制到canvas的(dx,dy)处
drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)	接受一个图片，通过参数(sx,sy,sw,sh)指定图片裁剪得到的范围，然后将其缩放到(dw,dh)的大小，最后将其绘制于canvas的(dx,dy)位置处

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制图像</title>
</head>
<body>
<canvas id="drawimg" width="1000" height="1000" style="border:1px red solid"></canvas>
<script type="text/javascript">
    window.onload = function () {
        var ctx = document.getElementById('drawimg').getContext('2d');
        var img = new Image();
        img.src = "https://tse1-mm.cn.bing.net/th/id/OIP.t2yFncG6fQW_ESyvL8vAWgHaFj?pid=Api&rs=1";
        img.onload=function () {
            ctx.drawImage(img,10,10,40,40,100,100,300,300)
        }
    }
</script>
</body>
</html>

使用窗口的onload加载事件，即页面加载时的执行函数。于函数中，ctx为上下文对象，创建Image对象img；使用img对象的属性src设置图片来源，最后用draw画出当前的画像。

6.2 图像平铺

使用画布绘制图像，还可以将绘制的图像作为背景图使用。在做背景图片时，若果显示图片的区域不能直接设定，则可以通过调用cratePattern(img,type)函数来替换drawImage函数来实现平铺显示。

平铺type类型
参数值	说明
np-repeat	不平铺
repeat-x	横向平铺
repeat-y	纵向平铺
repeat	全方向平铺

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图形平铺</title>
</head>
<body onload="draw('repeatimg')">
<canvas id="repeatimg" width="500" height="500" style="border: #1B85E2 1px solid"></canvas>
    <script type="text/javascript">
    function draw(id) {
        var canvas = document.getElementById('repeatimg');
        if (canvas == null) {
            return false;
        }
        var context = canvas.getContext('2d');
        context.fillStyle = "rgb(255,0,0)";
        context.fillRect(100,100,200,200)
        img = new Image();
        img.src = "https://tse2-mm.cn.bing.net/th/id/OIP.-JGAn0aniXgqzATzxc5WfgHaHQ?pid=Api&rs=1";
        img.onload = function () {
            var ptrn = context.createPattern(img,"repeat")
            context.fillStyle = ptrn;
            context.fillRect(100,100,500,500)
        }
    }
</script>
</body>
</html>

6.3 图像裁剪

处理图像时经常会遇到裁剪这种需求，即在画布上裁剪出一块区域，这块区域是在裁剪动作之前，由绘图路径设定的，可以是正方形、圆形、五角星和其它多边形来绘制的轮廓。即裁剪路径即为绘图路径，只不过这个路径不是用来绘图的，而是用来设定显示区域和遮挡区域的分界线。利用clip给canvas设置一个裁剪区域，在调用clip方法之后的代码只对这个设定的裁剪区域有效，不会影响其它地方，在局部更新时很有用。默认情况下裁剪区域为左上角(0,0)，宽和高分别等于canvas元素的宽和高的矩形。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像裁剪</title>
    <script type="text/javascript" src="script.js"></script>
</head>
<body onload="draw('clip')">
<h1>图像裁剪实例</h1>
<canvas id="clip" width="500" height="500" style="border: aqua 2px solid"></canvas>
<script>
    function draw(id) {
        var canvas = document.getElementById(id);
        if (canvas == null){
            return false;
        }
        var context = canvas.getContext('2d');
        // 创建线性渐变线
        var gr = context.createLinearGradient(0,400,300,0);
        gr.addColorStop(0,"rgba(255,0,0,0.5)");
        gr.addColorStop(1,"rgba(0,255,255,0.5)");
        context.fillStyle = gr;
        context.fillRect(0,0,500,500);
        img  = new Image();
        img.onload = function () {
            // 后面编写的一个函数名，非drawImage函数
            drawImg(context,img);
        }
        img.src = "01.jpg";
    }

    function drawImg(context,img) {
        // 多边图形创建
        create8StarClip(context);
        context.drawImage(img,-50,-150,300,300);
    }

    function create8StarClip(context){
      var dx=100;
      var dy=0;
      var s=150;
      context.beginPath();
      context.translate(100,150);
      var x=Math.sin(0);
      var y=Math.cos(0);
      var dig=Math.PI/5*4;
      for(var i=0;i<10;i++){
         var x=Math.sin(i*dig);
         var y=Math.cos(i*dig);
         context.lineTo(dx+x*s,dy+y*s);
      }
      context.clip();
   }

</script>
</body>
</html>

6.4 像素处理

电脑屏幕上的图像都是由一个个像素点组成的，一个像素对应这内存中一组连续的二进制位，每个位上的取值只能是0和1，连续的二进制位就可以由0和1排列组合出很多情况，每一组排列组合决定了像素的一种颜色。每个像素点由四个字节构成，第一个决定了像素的红色值，第二个决定了像素的路设值，第三个决定了像素的蓝色值，第四个决定了像素的透明度值。

在canvas画布中，可以使用ImageData对象来保存，有width、height和data三个属性，其中data属性是一个连续数组，图像中所有像素其实都保存在data中。

图像像素处理方法
方法	说明
createImageData(width,height)	在内存中创建一个指定ImageData（像素数组）对象，对象中的像素点是黑色透明的，即rgb(0,0,0,0)
createImageData(x,y,width,height)	返回一个ImageData对象，包含了指定区域的像素数组
putImageData(data,x,y)	将ImageData对象绘制到屏幕指定区域上

<!-- @TIME: 2020/9/21 14:59-->
<!-- @Author: 悠悠我心ya-->
<!-- @File: 像素处理.py-->
<!-- Software: PyCharm-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像像素处理</title>
    <script type="text/javascript" src="script.js"></script>
</head>
<body onload="draw('xs')">
<h1>图像像素处理</h1>
<canvas id="xs" width="500" height="500" style="border: indigo 1px solid;"></canvas>
<script>
    function draw(id) {
        var canvas = document.getElementById(id);
        if (canvas == null){
            return false;
        }
        var context = canvas.getContext('2d');
        img = new Image();
        img.src = "01.jpg";
        img.onload = function () {
            context.drawImage(img,0,0);
            var imgdata = context.getImageData(0,0,img.width,img.height);
            for (var i=o,n=imgdata.data.length;i<n;i+=4){
                imgdata.data[i+0] = 255 - imgdata.data[i+2];
                imgdata.data[i+1] = 255 - imgdata.data[i+1];
                imgdata.data[i+2] = 255 - imgdata.data[i+0] ;
            }
            context.putImageData(imgdata,0,0)

        }
    }
</script>
</body>
</html>

7 图形的保存与恢复

7.1 保存与恢复状态

画布中，由两个方法管理绘制状态的当前栈，save方法把当前状态放入栈中，而restore从栈顶弹出状态，绘制状态不会覆盖对画布所做的每件事情。save方法用来保存canvas的状态，save之后可以调用canvas的平移、放缩等操作。restore用于恢复canvas之前保存的状态，放置save后对canvas后续操作有影响。save和restore要配对使用，需要注意的是restore调用的次数需要少于save的次数，否则出错。

<!-- @TIME: 2020/9/21 23:53-->
<!-- @Author: 悠悠我心ya-->
<!-- @File: 保存与恢复.py-->
<!-- Software: PyCharm-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>保存与恢复</title>
</head>
<body>
<canvas id="sr" height="500" width="500" style="border: 1px rebeccapurple solid"></canvas>
<script type="text/javascript">
    var c = document.getElementById("sr");
    var cxt = c.getContext("2d");
    cxt.fillStyle = "rgb(255,0,0)";
    cxt.save();
    cxt.fillRect(50,50,100,100);
    cxt.fillStyle = "rgb(0,0,255)";
    cxt.save();
    cxt.fillRect(200,50,100,100);
    cxt.restore();
    cxt.fillRect(350,50,100,100);
    cxt.restore();
    cxt.fillRect(50,200,100,100);
</script>
</body>
</html>

7.2 保存文件

<!-- @TIME: 2020/9/21 23:53-->
<!-- @Author: 悠悠我心ya-->
<!-- @File: 保存与恢复.py-->
<!-- Software: PyCharm-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>保存与恢复</title>
</head>
<body>
<canvas id="sr" height="500" width="500" style="border: 1px rebeccapurple solid"></canvas>
<script type="text/javascript">
    var c = document.getElementById("sr");
    var cxt = c.getContext("2d");
    cxt.fillStyle = "rgb(255,0,0)";
    cxt.save();
    cxt.fillRect(50,50,100,100);
    cxt.fillStyle = "rgb(0,0,255)";
    cxt.save();
    cxt.fillRect(200,50,100,100);
    cxt.restore();
    cxt.fillRect(350,50,100,100);
    cxt.restore();
    cxt.fillRect(50,200,100,100);
    window.location=cxt.canvas.toDataURL('image/png')
</script>
</body>
</html>

而又何羡乎

关注

0
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5绘制图形

1 什么是canvas canvas是一个HTML新元素，可被JavaScript语言来绘制图形。HTML5中，canvas标签是一个矩形区域，包含了width和height，都可以通过CSS来定义，其默认值为300px和150px。在网页中使用的形式如下：<canvas id="mycanvas" width="300" height="200" style="border:1px solid #c3c3c3">Your browser doesn't support the canv
复制链接

扫一扫