HTML5中canvas绘图基础详解

已于 2024-09-08 13:15:47 修改
阅读量2.1k 收藏 17
点赞数 30
分类专栏： 《HTML5实战》 文章标签： html5 前端 html
于 2024-09-08 13:13:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36324341/article/details/142025145
版权

第7章 HTML5绘图基础

H5中新增了重要元素canvas,通过绘制任意图形，借助自带API，通过编写js可以控制各种图形，制作动画效果，对web具有划时代意义。

7.1 画布的基础知识

绘图三步骤：

步骤一：使用canvas创建一个画布区域，并获取该元素。

步骤二：获取canvas取得该元素的上下文环境。

步骤三：根据环境画出图形或动画。

7.1.1 canvas基本用法

添加一个标记ID，设置长宽即可。

1.功能描述

新建并绘制一个指定长度的正方形

2.代码实现
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>canvas简单示例</title>
        <script>
            function $$(id) {
                return document.getElementById(id);
            }
            function pageload(){
                var cnv = $$("cnvMain");
                var cxt = cnv.getContext("2d");
                cxt.fillStyle="red";
                cxt.fillRect(30,30,80,80);
            }
        </script>
    </head>
    <body onload="pageload();">
        <canvas id="cnvMain" width="280px" height="190px"></canvas>
    </body>
</html>
3.页面效果

4.源码分析

自定义的pageload()在页面加载时调用，取得上下文对象cxt，

调用画布的getContext方法，传递2d字符串，通过cxt来进行绘图，

本例绘制矩形和背景为红色。

7.1.2 绘制带边框的矩形

除了绘制背景色的图形外，还可以绘制有边框的图形，对应方法：

  • strokeRect(x,y,width,height)：画笔触边框矩形，x,y为起点坐标，width和height为宽高
  • strokeStyle：设置笔触颜色，渐变，模式
  • clearRect(x,y,width,height)：清空区域，x,y为图形内起点坐标，width和height为宽高
1.功能描述

新建canvas元素，在元素中绘制有背景色和边框的矩形，单击矩形时，清空矩形指定区域的图形色彩。

2.代码实现
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>canvas元素绘制带边框的矩形</title>
    <script>
        function pageload() {
            var cnv = document.getElementById("cnvMain");
            var cxt = cnv.getContext("2d");
            //设置边框
            cxt.strokeStyle = "red";
            cxt.strokeRect(30, 30, 150, 80);
            //设置背景
            cxt.fillStyle = "#eee";
            cxt.fillRect(30, 30, 150, 80);
        }
        function cnvClick() {
            var cnv = document.getElementById("cnvMain");
            var cxt = cnv.getContext("2d");
            //清空图形
            cxt.clearRect(36, 36, 138, 68);
        }
    </script>
</head>

<body onload="pageload();">
    <canvas id="cnvMain" width="280px" height="190px" onclick="cnvClick();"></canvas>
</body>

</html>
3.页面效果

4.源码分析

1.页面加载时定义函数pageload().

2.使用filleRect()方法绘制带背景色的图形。

3.使用strokeRect()方法绘制带边框的图形，边框颜色为红色。

4.点击事件cnvClick(),用clearRect()清空指定区域的色彩。

7.1.3 绘制渐变图形

canvas可以绘制渐变图形，1种是线性渐变，1种是径向渐变。

对应的方法：

  • createLinearGradient(xStart,yStart,xEnd,yEnd)：参数为渐变开始和结束坐标轴，创建一个LinearGradient对象.
  • LinearGradient对象的addColorStop(value,color)：渐变位置偏移量，0-1，调用两次。
1.功能描述
  1. 新建canvas元素
  2. 调用createLinearGradient(xStart,yStart,xEnd,yEnd)，获取LinearGradient对象
  3. 调用addColorStop(value,color)
  4. 赋给fillStyle属性，最后用fillRect()绘制出一个又渐变色的矩形
2.代码实现
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>7.1.3 绘制渐变图形</title>
    <script>
        function pageload() {
            var cnv = document.getElementById("cnvMain");
            var cxt = cnv.getContext("2d");
            //绘制从左到右的颜色渐变图形
            var gnt1 = cxt.createLinearGradient(20, 20, 150, 20);
            gnt1.addColorStop(0, "red");
            gnt1.addColorStop(1, "green");
            cxt.fillStyle = gnt1;
            cxt.fillRect(20, 20, 150, 20);
            //绘制从上到下的颜色渐变图形
            var gnt2 = cxt.createLinearGradient(20, 60, 20, 150);
            gnt2.addColorStop(0, "red");
            gnt2.addColorStop(1, "green");
            cxt.fillStyle = gnt2;
            cxt.fillRect(20, 60, 20, 150);
            //绘制沿着对角线颜色渐变图形
            var gnt3 = cxt.createLinearGradient(60, 60, 100, 100);
            gnt3.addColorStop(0, "red");
            gnt3.addColorStop(1, "green");
            cxt.fillStyle = gnt3;
            cxt.fillRect(60, 60, 100, 100);
        }
    </script>
</head>

<body onload="pageload();">
    <canvas id="cnvMain" width="280px" height="190px"></canvas>
</body>

</html>
3.页面效果

4.源码分析

按功能来看，创建三个不同LinearGradient对象，自左向右，从上到下，沿对角线设置渐变。

7.2 在画布中使用路径

借助画布路径功能来绘制直线和圆，方法如下：

  • moveTo(x,y)：绘制直线的开始点， xy是坐标
  • lineTo(x,y)：绘制直线结束点，xy也是坐标
  • arc()：绘制圆

7.2.1 moveTo与lineTo的用法

如果要绘制直线，通常使用moveTo(x,y)和lineTo(x,y)两个方法，moveTo用于将画笔移至指定点并以该点为直线的开始点，lineTo将用画笔从指定的起点坐标和传递的终点坐标参数之间绘制一条直线，该方法可以多次使用，最后用stroke方法来描边。

1.功能描述
  1. 新建canvas元素
  2. 调用moveTo(x,y)和lineTo(x,y)两个方法绘制两条直线，并显示在页面中。
2.实现代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>通过路径画直线</title>
    <script>
        function pageload() {
            var cnv = document.getElementById("cnvMain");
            var cxt = cnv.getContext("2d");
            cxt.moveTo(130, 30);
            cxt.lineTo(30, 100);
            cxt.lineTo(130, 160);
            cxt.lineWidth = 5;
            cxt.stroke();
        }
    </script>
</head>

<body onload="pageload();">
    <canvas id="cnvMain" width="280px" height="190px"></canvas>
</body>

</html>
3.页面效果

4.源码分析

略

7.2.2 使用arc方法绘制圆形

绘制各种圆形图案：

cxt.arc(x,y,radius,startAngle,endAngle,anticlockwise)：x,y表示坐标，radius表示半径(像素)，

startAngle,endAngle表示开始和结束角度，anticlockwise表示true表示顺时针。

cxt.beginPath()在arc之前调用，之后调用cxt.closePath()，他两成对出现。

1.功能描述

新建canvas元素，创建三个span内容分别设置为实体圆，边框圆，衔接圆，单击span绘制对应图案。

2.实现代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>通过路径画圆形</title>
    <script>
        function spn1() {
            var cnv = document.getElementById("cnvMain");
            var cxt = cnv.getContext("2d");
            //清除画布原有图形
            cxt.clearRect(0, 0, 280, 190);
            //开始画实心圆
            cxt.beginPath();
            cxt.arc(100, 100, 50, 0, Math.PI * 2, true);
            cxt.closePath();
            //设置填充色
            cxt.fillStyle = "red";
            cxt.fill();
        }
        function spn2() {
            var cnv = document.getElementById("cnvMain");
            var cxt = cnv.getContext("2d");
            //清除画布原有图形
            cxt.clearRect(0, 0, 280, 190);
            //开始画边框圆
            cxt.beginPath();
            cxt.arc(100, 100, 50, 0, Math.PI * 2, true);
            cxt.closePath();
            //设置边框色
            cxt.strokeStyle = "red";
            //边框宽度
            cxt.lineWidth = 2;
            cxt.stroke();
        }
        function spn3() {
            var cnv = document.getElementById("cnvMain");
            var cxt = cnv.getContext("2d");
            //清除画布原有图形
            cxt.clearRect(0, 0, 280, 190);
            //开始画圆
            cxt.beginPath();
            cxt.arc(100, 100, 50, 0, Math.PI * 2, true);
            cxt.closePath();
            //设置填充色
            cxt.fillStyle = "#eee";
            cxt.fill();
            cxt.strokeStyle = "#666";
            cxt.lineWidth = 2;
            cxt.stroke();
            //衔接边框圆
            cxt.beginPath();
            cxt.arc(175, 100, 50, 0, Math.PI * 2, true);
            cxt.closePath();
            //设置边框色
            cxt.strokeStyle = "red";
            //边框宽度
            cxt.lineWidth = 2;
            cxt.stroke();
        }
    </script>
</head>

<body>
    <div>
        <p>
            <span onclick="spn1();">实体圆</span>
            <span onclick="spn2();">边框圆</span>
            <span onclick="spn3();">衔接圆</span>
        </p>
    </div>
    <canvas id="cnvMain" width="280px" height="190px"></canvas>
</body>

</html>
3.页面效果

4.源码分析,略

7.2.3 绘制渐变图形

  • createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd):xStart,yStart开始渐变坐标点，radiusStart开始渐变半径，xEnd,yEnd结束渐变圆心的坐标，radiusEnd结束渐变圆的半径。
1.功能描述

新建canvas严肃，调用createRadialGradient()创建渐变对象，该对象设置为fillStyle的值，在画布中绘制一个径向渐变的圆。

2.代码实现
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>绘制径向渐变的圆</title>
    <script>
        function pageload() {
            var cnv = document.getElementById("cnvMain");
            var cxt = cnv.getContext("2d");
            //开始创建渐变对象
            var gnt = cxt.createRadialGradient(30, 30, 0, 20, 20, 400);
            gnt.addColorStop(0, "#000");
            gnt.addColorStop(0.3, "#eee");
            gnt.addColorStop(1, "#fff");
            //开始绘制实体圆路径
            cxt.beginPath();
            cxt.arc(125, 95, 80, 0, Math.PI * 2, true);
            cxt.closePath();
            //填充背景色并填充
            cxt.fillStyle = gnt;
            cxt.fill();
            //开始绘制边框圆路径
            cxt.beginPath();
            cxt.arc(125, 95, 80, 0, Math.PI * 2, true);
            cxt.closePath();
            //设置边框颜色
            cxt.strokeStyle = "#666";
            //设置边框宽度
            cxt.lineWidth = 2;
            //开始描边
            cxt.stroke();
        }
    </script>
</head>

<body onload="pageload();">
    <canvas id="cnvMain" width="280px" height="190px"></canvas>
</body>

</html>
3.页面效果

4.源码解析，略。

7.3 对画布中图形的操作

有时需要对图形进行移动，缩放，旋转等操作，可以借助Canvas API来实现。

  • translate(x,y)：移动
  • scale(x,y)：缩放
  • rotate(angle)：旋转

7.3.1 变换图形原点坐标

1.功能描述

新建canvas，画布绘制一个正方形，创建button,分别设置移动，缩放，旋转，对正方形进行相应的操作。

2.实现代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>移动、缩放、旋转绘制的图形</title>
    <style>
        button {
            border-radius: 5px;
            background-color: steelblue;
            color: white;
        }
    </style>
    <script>
        function drawRect() {
            var cnv = document.getElementById("cnvMain");
            var cxt = cnv.getContext("2d");
            cxt.strokeStyle = "red"
            cxt.lineWidth = 2;
            cxt.strokeRect(105, 70, 60, 60);
        }
        //上下移动已绘制的正方形
        function btn1() {
            var cxt = document.getElementById("cnvMain").getContext("2d");
            cxt.translate(-20, -20);
            drawRect();
            cxt.translate(40, -40);
            drawRect();
        }
        //缩放已绘制的正方形
        function btn2() {
            var cxt = document.getElementById("cnvMain").getContext("2d");
            cxt.scale(1.2, 1.2);
            drawRect();
            cxt.scale(1.2, 1.2);
            drawRect();
        }
        //旋转已绘制的正方形
        function btn3() {
            var cxt = document.getElementById("cnvMain").getContext("2d");
            cxt.rotate(Math.PI / 8);
            drawRect();
            cxt.rotate(Math.PI / 4);
            drawRect();
        }
    </script>
</head>

<body onload="drawRect();">
    <div>
        <button onclick="btn1();">移动</button>
        <button onclick="btn2();">缩放</button>
        <button onclick="btn3();">旋转</button>
    </div>
    <canvas id="cnvMain" width="280px" height="190px"></canvas>
</body>

</html>
3.页面效果

7.3.2 组合多个图形

绘制多个有交叉点的图形，新绘制的会覆盖原图形，想要改变默认多图组合的显示形式，可以修改：

globalCompositeOperation：source是新图形，destination是原图形

属性值有多个：

  • source-over:默认值，覆盖原图形
  • copy:只显示新图形，其他部分透明处理
  • darker:两种都显示，重叠部分颜色值相减后形成
  • destination-atop:只显示与原图形重叠部分和新图形剩余部分，其他透明处理
  • destination-in:只显示与原图形重叠部分，其他透明处理
  • destination-out:只显示与原图形不重叠部分，其他透明处理
  • destination-over:原图形覆盖新图形
  • lighter:都显示，重叠部分相加形成
  • source-atop:重叠部分+原图形其余部分，其他透明
  • source-in:重叠部分，其他透明
  • source-out:不重叠部分，其他透明
  • xor:都绘制，重叠部分透明
1.功能描述

新建canvas并定义pageload函数，创建一个正方形和圆形，两个图组合后的globalCompositeOperation设置为lighter后显示到画布中。

2.代码实现
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>设置多图形组合显示的方式</title>
    <script>

        //绘制正方形
        function drawRect(cxt) {
            cxt.fillStyle = "#666";
            cxt.fillRect(60, 50, 80, 80);
        }
        //绘制圆形
        function drawCirc(cxt) {
            cxt.beginPath();
            cxt.arc(130, 120, 50, 0, Math.PI * 2, true);
            cxt.closePath();
            cxt.fillStyle = "#ccc";
            cxt.fill();
        }

        function pageload() {
            var cxt = document.getElementById("cnvMain").getContext("2d");
            drawRect(cxt);
            cxt.globalCompositeOperation = "lighter";
            drawCirc(cxt);
        }
    </script>
</head>

<body>

    <body onload="pageload();">
        <canvas id="cnvMain" width="280px" height="190px"></canvas>
    </body>
</body>

</html>
3.页面效果

7.3.3 添加图形阴影

绘制图形时，可以给背景添加阴影，达到立体效果，属性如下：

  • shadowOffsetX：阴影与图形的水平距离，作为负，右为正
  • shadowOffsetY：阴影与图形的垂直距离，上为负，下为正
  • shadowColor：阴影颜色值
  • shadowBlur：阴影模糊值，值越大，越模糊，通常1-10之间
1.功能描述

画两个完全相同的长方形，分别添加不同方向的阴影，同时显示在画布中。

2.代码实现
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>添加绘制图形阴影的效果</title>
    <script>
        function pageload() {
            var cxt = document.getElementById("cnvMain").getContext("2d");
            //设置左上方向的阴影
            cxt.shadowOffsetX = -6;
            cxt.shadowOffsetY = -6;
            cxt.shadowColor = "#ccc";
            cxt.shadowBlur = 1;
            cxt.fillStyle = "#eee";
            cxt.fillRect(20, 28, 100, 130);
            //设置右下方向的阴影
            cxt.shadowOffsetX = 6;
            cxt.shadowOffsetY = 6;
            cxt.shadowColor = "#ccc";
            cxt.shadowBlur = 1;
            cxt.fillStyle = "#eee";
            cxt.fillRect(150, 28, 100, 130);
        }
    </script>
</head>

<body onload="pageload();">
    <canvas id="cnvMain" width="280px" height="190px"></canvas>
</body>

</html>
3.页面效果

7.4 处理画布中的图像

不仅可以绘制各种图形，也可以通过Canvas API将磁盘或者网络上的图片导入的画布中，并且对导入的图片进行平铺，切割，像素处理等多项操作。

7.4.1 绘制图像

  • drawImage(image,dx,dy):image页面图片(可以是和js的Image对象)，dx是在画布中的横坐标，dy是纵坐标。
  • drawImage(image,dx,dy,dw,dh)：dw表示源图像缩放至画布中的宽度，dh表示缩放至画布上的高度。
  • drawImage(image,sx,sy,sh,dx,dy,dw,dh)：sx,sy,sw,sh表示源图像需要裁剪的范围，sx,sy表示需要裁剪的坐标，sw,sh表示裁剪的长宽。
1.功能描述

新建canvas元素，连续点击分别使用上述三种绘制图像的方法，先绘制指定位置的图像，然后是指定位置和大小的图像，最后以映射的方式将源图像中的部分图像以放大方式绘制在画布中。

2.代码实现
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>使用drawImage方法在画布中绘制图像</title>
    <script>
        var intNum = 0;
        function cnvClick(cnv) {
            intNum++;
            intNum = (intNum == 4) ? 1 : intNum;
            var cxt = cnv.getContext("2d");
            cxt.clearRect(0, 0, cnv.width, cnv.height);
            var objImg = new Image();
            objImg.src = "img/moon.jpg";//图片大小164*99px
            objImg.onload = function () {
                switch (intNum) {
                    case 1: cxt.drawImage(objImg, 10, 10); break;
                    case 2: cxt.drawImage(objImg, 10, 10, 94, 123); break;
                    case 3: cxt.drawImage(objImg, 10, 10, 94, 123); cxt.drawImage(objImg, 45, 50, 100, 150, 110, 10, 160, 180); break;
                }
            }
        }
    </script>
</head>

<body>
    <canvas style="border: 1px dotted;" id="cnvMain" width="280px" height="190px" onclick="cnvClick(this);"></canvas>
</body>

</html>
3.页面效果

7.4.2 平铺图像

createPattern()方法关联图像，将平铺对象给fillStyle，然后填充fillRect()方法：

cxt.createPattern(image,type)：type有4中，no-repeat(不平铺),repeat-x(水平方向),repeat-y(垂直方向),repeat(全方位平铺)

1.功能描述

新建canvas元素，由于图片宽度164px，高度99px，设置画布宽度330px,高度400px.

每次点击画布，调用不同的平铺方式，显示图像到画布中。

2.代码实现
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>使用createPattern方法在画布中平铺图像</title>
    <script>
        var intNum = 0;
        function cnvClick(cnv) {
            intNum++;
            intNum = (intNum == 5) ? 1 : intNum;
            var strPrnType = "";
            switch (intNum) {
                case 1: strPrnType = "no-repeat"; break;
                case 2: strPrnType = "repeat-x"; break;
                case 3: strPrnType = "repeat-y"; break;
                case 4: strPrnType = "repeat"; break;
            }
            var cxt = cnv.getContext("2d");
            cxt.clearRect(0, 0, cnv.width, cnv.height);
            var objImg = new Image();
            objImg.src = "img/moon.jpg";//图片大小164*99px
            var prn = cxt.createPattern(objImg, strPrnType);
            objImg.onload = function () {
                cxt.fillStyle = prn;
                cxt.fillRect(0, 0, cnv.width, cnv.height);
            }
        }
    </script>
</head>

<body>
    <canvas style="border: 1px dotted;" id="cnvMain" width="330px" height="400px" onclick="cnvClick(this);"></canvas>
</body>

</html>
3.页面效果

7.4.3 切割图像

用clip()方法切割画布中绘制的图像，该方法是无参方法，调用方法前先使用路径方式在画布中绘制区域，才能通过clip来对该区域进行切割。

1.功能描述

新建canvas，调用clip()方法，将画布绘制的图像切割成一个光盘形状。

2.代码实现
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>使用clip方法在画布中切割图像</title>
    <script>
        function pageload() {
            var cxt = document.getElementById("cnvMain").getContext("2d");
            var objImg = new Image();
            objImg.src = "img/moon.jpg";
            objImg.onload = function () {
                drawCirc(cxt, 60, true);
                cxt.drawImage(objImg, 70, 50);
                drawCirc(cxt, 10, false);
            }
        }
        //根据参数绘制圆
        function drawCirc(cxt, intR, blnC) {
            cxt.beginPath();
            cxt.arc(140, 95, intR, 0, Math.PI * 2, true)
            cxt.closePath();
            //设置边框颜色
            cxt.strokeStyle = "red";
            cxt.lineWidth = 3;
            cxt.stroke();
            if (blnC) {
                cxt.clip();
            } else {
                cxt.fillStyle = "#fff";
                cxt.fill();
            }
        }
    </script>
</head>

<body onload="pageload();">
    <canvas style="border: 1px dotted;" id="cnvMain" width="280px" height="190px"></canvas>
</body>

</html>
3.页面效果

7.4.4 处理像素

处理画布图像的像素，例如做成蒙版效果，黑白色效果等。

两个方法：

cxt.getImageData(sx,sy,sw,sh)：sx,sy是所需图像区域的坐标，sw,sh是所选区域的宽高，获取的区域可以用objImgData变量保存，该变量是CanvasPixelArray对象,objImgData.data是一个保存像素的数组，[r1,g1,b1,a1,r2,g2,b2,a2...]，objImgData.data.length获取像素总量，可以遍历时使用该值。

cxt.putImageData(image,dx,dy)：image表示重新绘制的图像，dx,dy表示绘制在画布上的坐标。

1.功能描述

新建canvas，第一次单击绘制一幅图像，再次单击处理该图像的像素，以反色彩的形式在画布中重新绘制。

2.实现代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>使用getImageData和putImageData方法处理图像像素</title>
    <script>
        var intNum = 0;
        function cnvclick(cnv) {
            intNum++;
            intNum = (intNum == 3) ? 1 : intNum;
            var cxt = cnv.getContext("2d");
            var objImg = new Image();
            objImg.src = "img/moon.jpg";
            //使图片居中的坐标
            var intX = cnv.width / 2 - objImg.width / 2;
            var intY = cnv.height / 2 - objImg.height / 2;
            objImg.onload = function () {
                switch (intNum) {
                    case 1: cxt.drawImage(objImg, intX, intY); break;
                    case 2: dealPixel(cxt, objImg, intX, intY); break;
                }
            }
        }
        function dealPixel(cxt, objImg, intX, intY) {
            var imgData = cxt.getImageData(intX, intY, objImg.width, objImg.height);
            //遍历像素数组，进行颜色取反
            for (var i = 0; i < imgData.data.length; i += 4) {
                imgData.data[i] = 255 - imgData.data[i];
                imgData.data[i + 1] = 255 - imgData.data[i + 1];
                imgData.data[i + 2] = 255 - imgData.data[i + 2];
            }
            cxt.putImageData(imgData, intX, intY);
        }
    </script>
</head>

<body>
    <canvas style="border: 1px dotted;" onclick="cnvclick(this);" id="cnvMain" width="280px" height="190px"></canvas>
</body>

</html>
3.页面效果

7.5 画布的其他应用

H5中通过canvas不仅可以绘制图形，图像，还可以调用相关方法绘制文字，同时将绘制的图形保存，还原，以base64位的URL形式在浏览器中输出，以及在画布上制作简单的动画。

7.5.1 绘制文字

fillText()方法以填充的方式绘制文字：

  • cxt.fillText(content,dx,dy,[maxLength])：content是文字内容，dx,dy是左上角坐标，maxLength是文字显示的最大长度，设置后在长度范围内绘制文字。
  • cxt.strokeText(content,dx,dy,[maxWidth])：与以上参数一致。

绘制文字的相关属性：

  • font: CSS样式字体的任何值，样式，名称，大小，粗细，行距等
  • textAlign：文本对齐方式，start,end,left,right,center
  • textBaseline：文本相对于起点的位置，top,bottom,middle
1.功能描述

新建canvas元素，页面加载时，设置三种不同字体的文字，分别绘制在画布元素中的不同坐标位置。

2.代码实现

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>使用fillText与strokeText绘制文字</title> <script> function pageload() { var cxt = document.getElementById("cnvMain").getContext("2d"); drawText(cxt, "bold 35px impact", 90, 70, false); drawText(cxt, "bold 35px monospace‌‌", 130, 110, true); drawText(cxt, "bold 35px cursive", 170, 150, true); } //根据参数绘制不同类型的字体 function drawText(cxt, strFont, intX, intY, blnFill) { cxt.font = strFont; cxt.textAlign = "center"; cxt.textBaseline = "bottom"; if (blnFill) { cxt.fillStyle = "#ccc"; cxt.fillText("HTML5实战", intX, intY); } else { cxt.strokeStyle = "#666"; cxt.strokeText("HTML实战", intX, intY); } } </script> </head> <body οnlοad="pageload();"> <canvas style="border: 1px dotted;" id="cnvMain" width="280px" height="190px"></canvas> </body> </html>

3.页面效果

7.5.2 保存、恢复以及输出图形

有时需要绘制多个图形，并在图形之间进行切换，如果不进行保存，切换后，原先绘制的图形将丢失，为解决这一问题，可以调用save()方法保存，用restore()方法进行还原，或者toDataURL(ImgType)方法保存图形输出至浏览器,ImgType表示MIME类型，例如"image/png"。

对内存栈的操作。

1.功能描述

新建1个canvas元素，和三个button元素，分别为保存，恢复，输出。

第一次单击画布，绘制指定填充色的大小图形，点击保存按钮，保存第一次绘制的图形，

第二次单击画布，绘制与第一次填充色不同的图形，点击恢复标记，用于最后一次绘制图形时使用，

第三次单击画布，由于还原了第一次的填充色，因此在最后一次绘制图形时，将第一次填充色填充到最后一次绘制的图形，单击输出是，以图形的base64输出至浏览器。

2.代码实现
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>使用fillText与strokeText绘制文字</title>
    <script>
        function pageload() {
            var cxt = document.getElementById("cnvMain").getContext("2d");
            drawText(cxt, "bold 35px impact", 90, 70, false);
            drawText(cxt, "bold 35px monospace‌‌", 130, 110, true);
            drawText(cxt, "bold 35px cursive", 170, 150, true);
        }
        //根据参数绘制不同类型的字体
        function drawText(cxt, strFont, intX, intY, blnFill) {
            cxt.font = strFont;
            cxt.textAlign = "center";
            cxt.textBaseline = "bottom";
            if (blnFill) {
                cxt.fillStyle = "#ccc";
                cxt.fillText("HTML5实战", intX, intY);
            } else {
                cxt.strokeStyle = "#666";
                cxt.strokeText("HTML实战", intX, intY);
            }
        }
    </script>
</head>

<body onload="pageload();">
    <canvas style="border: 1px dotted;" id="cnvMain" width="280px" height="190px"></canvas>
</body>

</html>
3.页面效果

7.5.3 制作简单的动画

制作动画分两步：

第一步：自定义一个函数，用于图形的移动或其他动作。

第二部：使用setInterval()方法设置动画执行的间隔时间，反复执行自定义函数。

1.功能描述

新建canvas元素，绘制一个卡通笑脸，加载页面时，该笑脸从左往右移动，到右边时改为从右往左移动到起始为止。

2.实现代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>在画布中制作简单的动画</title>
    <script>
        var intI, intJ, intX;
        function pageload() {
            var cxt = document.getElementById("cnvMain").getContext("2d");
            drawFace(cxt);
            intI = 1;
            intJ = 11;
            setInterval(moveFace, 200);
        }

        //画笑脸
        function drawFace(cxt) {
            drawCirc(cxt, "#666", 30, 80, 30, 2, true);
            drawCirc(cxt, "#fff", 20, 70, 5, 2, true);
            drawCirc(cxt, "#fff", 40, 70, 5, 2, true);
            drawCirc(cxt, "#fff", 30, 80, 18, 1, false);
        }
        //根据参数画圆
        function drawCirc(cxt, strColor, intX, intY, intR, intH, blnFill) {
            cxt.beginPath();
            cxt.arc(intX, intY, intR, 0, Math.PI * intH, blnFill);
            if (blnFill) {
                cxt.fillStyle = strColor;
                cxt.fill();
            } else {
                cxt.lineWidth = 2;
                cxt.strokeStyle = strColor;
                cxt.stroke();
            }
            cxt.closePath();
        }
        //笑脸移动功能
        function moveFace() {
            var cxt = document.getElementById("cnvMain").getContext("2d");
            cxt.clearRect(0, 0, 280, 190);
            if (intI < 10) {
                intI += 1;
                intX = intI;
            } else {
                if (j > 0) {
                    intJ -= 1;
                    intX = -intJ;
                }
            }
            cxt.translate(intX, 0);
            drawFace(cxt);
        }
    </script>
</head>

<body>

    <body onload="pageload();">
        <canvas style="border: 1px dotted;" id="cnvMain" width="280px" height="190px"></canvas>
    </body>
</body>

</html>
3.页面效果

笑脸没回来，需要微调。。。

页面完整效果看：【有道云笔记】《HTML5实战》
https://note.youdao.com/s/3ubs1KG8 

H5画布 canvas 入门到精通 _ 第二部分(绘制文字、图片、坐标系，canvas颜色和样式，canvas绘制环境)
m0_54866636的博客
02-23 1150
目录 1. 绘制文字 2. 绘制图片(drawImage) （1）基本绘制方法 （2）案例：序列帧动画 3. 绘制坐标系 4. canvas 颜色样式和阴影 5.?复杂样式 （1）渐变 （2）绘制背景图 （3）变换（重点） 6. 绘制环境的相关操作 1. 绘制文字 **ctx.font；**设置文本内容的字体属性，使用方式与 css font 相同 **ctx.textAlign；**设置文本内容的对齐方式 start：默认，文本在指定的位置开始 end：文本在指定的位置结束 center：文本的中
h5-canvas画布
m0_74056313的博客
12-19 1354
canvas
玩转html5<canvas>画图
weixin_30827565的博客
08-06 1191
导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变（发散） 图形变形（平移、旋转、缩放） 矩阵变换（图形变形的机制） 图形组合 给图形绘制阴影 绘制图像（图片平铺、裁剪、像素处理[不只图像、包括其他绘制图形]） 绘制文字 保存和恢复状态（context） 保存文件 结合setInterval制...
HTML5 Canvas 全攻略：轻松打造酷炫动态网页
最新发布
mmc123125的博客
12-10 988
通过 JavaScript 可以结合 HTML5 的if (!emailInput.setCustomValidity('请使用 @example.com 结尾的邮箱地址');} else {});HTML5 的表单新特性为开发者带来了诸多便利，通过更高效的验证方式、更丰富的输入类型以及增强的交互体验，极大地提升了用户体验。在未来，随着浏览器对标准支持的进一步提升，表单设计将更加智能和强大。探索 HTML5 表单的每一项新功能，把握现代 Web 开发的趋势，让你的表单更智能、更友好！
HTML5 Canvas绘图
It_sharp的博客
01-14 723
Canvas标签 HTML5 标签用作绘图的容器，使用JS脚本来完成绘图。 如下代码可以获取绘制上下文，类似于C#中的Graphics g = e.Graphics获取画布 var c = document.getElementById(&amp;amp;quot;Canvas&amp;amp;quot;); var ctx = c.getContext(&amp;amp;quot;2d&amp;amp;quot;); 绘制的对象有文本、线条、矩形、圆形等
H5画布 canvas（一）canvas简介、绘制圆形/矩形、案例饼状图绘制
商务合作 | 共同学习 | 携手共进
02-18 10万+
canvas 简介、canvas 绘图基础(标签介绍、上下文context、beginPath 状态)、案例：绘制表格、绘制饼状图。
HTML5 Canvas绘制图形从入门到精通
qq_58626489的博客
02-26 1769
canvas> 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。 标记和 SVG以及 VML 之间的一个重要的不同是， 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。Mozilla 程序从 Gecko 1.8 (Firefox 1.5) 开始支持, Internet Explorer 从 IE9 开始。Chrome 和 Opera 9+ 也支持。
Android中Canvas绘图基础详解
11-11
该代码是一个完整的Android工程，详细演示如了如何使用Android中的各种drawXXX方法，以及画笔Paint如何影响绘制的效果。 具体参见博文： http://blog.csdn.net/iispring/article/details/49770651
详解HTML5 canvas绘图基本使用方法
09-28
接着，调用canvas对象的`getContext('2d')`方法，获取到2D渲染上下文，这是进行所有绘图操作的基础。一旦有了这个2D渲染上下文，我们就可以开始绘图了。 绘制线段是canvas的基本操作之一。`moveTo(x, y)`方法用来...
HTML5 2D Canvas绘图API详解
“HTML5+2DCanvas+API.pdf”是一份关于HTML5中的2D Canvas API的技术文档，由CodeEx.CN于2010年10月21日翻译，详细介绍了如何在Web页面上使用HTML5的Canvas元素进行二维图形的绘制。 HTML5的2D Canvas API允许...
HTML5 Canvas绘图API详解：绘制线条与样式
这些API只是Canvas绘图功能的一小部分，实际使用中还有更多方法如`arc()`（绘制圆弧）、`fill()`（填充形状）、`clip()`（剪切区域）等，以及复杂的渐变和阴影设置。熟练掌握这些API，开发者可以创造出复杂的图形和...
html5 canvas实现绘图板
05-12
html5 canvas绘图板，实现了如下功能： 1、调色（只有固定的几种颜色）、 2、改变笔触粗细、 3、撤销、 4、保存图片到本地、 5、改变画布颜色
使用 HTML5 canvas 进行 Web 绘图
11-16
简介： 新的 HTML5 规范旨在帮助开发人员更轻松的编写出各类 Web 应用，以顺应当前 SaaS，云计算以及 RIA 等技术的最新趋势。在 HTML5 得以广泛推广之前，开发人员通常使用 SVG，VML 等技术进行 Web 绘图操作，但这些基于 XML 的绘图语言声明式的绘图方式并不能满足复杂绘图操作在性能上的需求，比如 Web 游戏所需要的像素级别的绘图能力。HTML5 canvas 元素的出现填补了这种不足，开发人员可以使用 JavaScript 脚本语言在 canvas 中进行一系列基于命令的图形绘制操作，本文将通过讲解如何使用 canvas 元素进行基本绘图操作，以及完成简单的动画和用户交互任务，阐明 canvas 在帮助构建 Web 图形类应用时所能够提供的能力。更多html5相关信息请关注html5中国：http://www.html5cn.org 背景介绍 HTML5 中新引入的 canvas 元素使得 Web 开发人员在无须借助任何第三方插件（如 Flash，Silverlight）的情况下，可以直接使用 JavaScript 脚本在 Web 页面进行绘图。它首次由苹果公司的 Webkit 框架引入实现，并成功运用在 Safari 浏览器中，读者在 这里可以体验到基于 canvas 的精彩示例。目前，canvas 已成为 HTML5 规范中的事实性标准，并且已经被 Firefox 3.0+, Safari 3.0+, Chrome 3.0+, Opera10.0+ 等浏览器所支持。最近（本文撰写之时），IE 也正式宣称将在其 9.0 版本之后，开始对 canvas 元素进行支持。
HTML5画布(canvas)绘制图形
m0_61843988的博客
07-15 4622
canvas 元素用于在网页上绘制图形 canvas 是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形。 默认情况下它在网页上是一块空白区域，默认大小300*150 注意：canvas画布默认背景色为透明色，可以自行定义背景色...
H5中的canvas
jh1906338271的博客
09-09 507
canvas 在H5中 canvas 元素使用 JavaScript 在网页上绘制图像。画布的话本身是300乘以150的原始宽高，是一个矩形区域，可以控制器中的每一个像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。canvas本身就是一个标签，它本身是没有绘图能力的，，所有的绘制工作必须在JavaScript 内部完成。在JavaScript 内使用 id 来寻找 can...
学习HTML5 Canvas这一篇文章就够了
热门推荐
完善飞跃
06-16 16万+
一、canvas简介&amp;amp;lt;canvas&amp;amp;gt; 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。 后来，有人通过Gecko内核的浏览器 (尤其是Mo
大家都能看懂的 canvas基础教程
weixin_33770878的博客
11-20 207
原文链接:http://www.shitu91.com/cms/canvasSub/index.html 01.canvas简单的认识 canvas 是html5提供给我们的一个绘图标签 默认大小 300X150 背景透明 <!DOCTYPE html> <html lang="en"> <head> <met...
HTML5中的Canvas绘图
兜兜的博客
07-12 371
主要进行了canvas的简介，里面介绍了它的使用方法等。
H5 canvas
u012919357的专栏
03-28 788
1.canvas网页中绘图环境配置     标签：canvas 默认大小：宽300px，高150px;     宽高需要是行内元素？因为css是进行等比缩放，造成里面内容也将被缩放     绘制环境：getContext("2d")；目前支持2d环境 2.绘制方形：    fillRect(L,T,W,H) 分别是左，上，宽，高，默认为黑色    strokeRect(L,T,W,H)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿立聊全栈

有作用的，有闲钱的支持一点。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值