HTML5笔记总结（二）

智汇风渔AI小白

墨衍会员 · AI 创作全网分发码龄7年

关注

原创最新推荐文章于 2026-05-20 16:54:23 发布 437 阅读 AI 写同款· GEO 优化 ›

UG476 GT Transceivers文档翻译和自身理解对UG476 Xilinx官方文档进行翻译的基础上加上自己的理解阅读详情

一、Canvas绘制图形

绘制路径

方法	描述
fill()	填充当前绘图（路径）
stroke()	通过线条来绘制图形轮廓，不会自动调用classpath,绘制已定义的路径
beginPath()	起始一条路径，或重置当前路径
moveTo()	把路径移动到画布中的指定点，不创建线条
closePath()	闭合路径之后图形绘制会重新回到起点，创建从当前点回到起始点的路径
lineTo()	添加一个新点，创建从该点到最后指定点的线条
clip()	从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo()	创建二次贝塞尔曲线
bezierCurveTo()	创建三次方贝塞尔曲线
arc()	创建弧/曲线（用于创建圆形或部分圆）
arcTo()	创建两切线之间的弧/曲线
isPointInPath()	如果指定的点位于当前路径中，返回布尔值

康康案例（一）绘制圆形

在这里插入图片描述

	/* 
         绘制圆形
         g.arc(x,y,r,startAngle,endAngle,anticlockwisc)
         startAngle:弧度开始    endAngle：弧度结束
         anticlockwisc：可选的，规定应该是逆时针还是顺时针绘图  
             默认false顺时针 true逆时针
     */
     //绘制顺时针圆弧
     g.fillStyle = "red";
     g.beginPath();
     g.arc(50,50,40,0,Math.PI*2);
     g.closePath();
     g.fill();

康康案例（二）

在这里插入图片描述

康康案例（三）绘制贝塞尔曲线

	<script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        //创建画笔
        var g = canvas.getContext("2d");
        /* 
            quadraticCurveTo绘制二次贝塞尔曲线
            quadraticCurveTo(cpx,cpy,x,y)
            (cpx,cpy)绘制点坐标
            (x,y)结束点的坐标
        */
        g.beginPath();
        g.moveTo(10,200);//起始点
        //绘制二次贝塞尔曲线
        g.quadraticCurveTo(40,100,200,200);
        g.stroke();

        g.beginPath();
        g.rect(10,200,10,10);//开始点
        g.rect(40,200,10,10);//控制点
        g.rect(200,200,10,10);//结束点
        g.fill();
        /* 
            创建三次贝塞尔曲线
            bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y)
        */
        g.beginPath();
        g.moveTo(10.270);//起始点
        g.bezierCurveTo(300,305,310,340,200,270);
        g.stroke();
    </script>

二、绘制贝塞尔曲线

什么是贝塞尔曲线

贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。

一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。

贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较成熟的位图软件中也有贝塞尔曲线工具如PhotoShop等。在Flash4中还没有完整的曲线工具，而在Flash5里面已经提供出贝塞尔曲线工具。

贝塞尔曲线于1962，由法国工程师皮埃尔·贝塞尔（Pierre Bézier）所广泛发表，他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由Paul de Casteljau于1959年运用de Casteljau演算法开发，以稳定数值的方法求出贝兹曲线。

一次贝塞尔曲线(线性贝塞尔曲线)

一次贝塞尔曲线其实是一条直线。在这里插入图片描述

二次贝塞尔线

在这里插入图片描述

三次贝塞尔线

在这里插入图片描述

<script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        //创建画笔
        var g = canvas.getContext("2d");
        /* 
            quadraticCurveTo绘制二次贝塞尔曲线
            quadraticCurveTo(cpx,cpy,x,y)
            (cpx,cpy)绘制点坐标
            (x,y)结束点的坐标
        */
        g.beginPath();
        g.moveTo(10,200);//起始点
        //绘制二次贝塞尔曲线
        g.quadraticCurveTo(40,100,200,200);
        g.stroke();

        g.beginPath();
        g.rect(10,200,10,10);//开始点
        g.rect(40,200,10,10);//控制点
        g.rect(200,200,10,10);//结束点
        g.fill();
        /* 
            创建三次贝塞尔曲线
            bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y)
        */
        g.beginPath();
        g.moveTo(10.270);//起始点
        g.bezierCurveTo(300,305,310,340,200,270);
        g.stroke();
    </script>

三、绘制图形

1、lineCap 是 canvas 2D API，指定如何绘制每一条线段末端的属性

有3个可选值：
（1）butt： 线段某段以方形结束
（2）round: 线段末端以圆形结束
（3）square： 线段末端以方形结束，但是多出来一个宽度和线宽一样，高度是线段厚度一半的矩形区域，默认值就是butt;

在这里插入图片描述

var lineCaps =["butt","round","square"]
			
        for (var i = 0; i < 3; i++) {
                ctx.beginPath();
                ctx.moveTo(20 + 30 * i, 30)
                ctx.lineTo(20 + 30 * i, 100)
                ctx.lineWidth=20;
                ctx.lineCap =lineCaps[i]
                ctx.stroke()
            }
        // 绘制两端线段
        ctx.beginPath();
        ctx.moveTo(0,30);
        ctx.lineTo(300,30)
        
        ctx.moveTo(0,100);
        ctx.lineTo(300,100);
        
        ctx.lineWidth=1;
        ctx.strokeStyle='#FF1493'
        ctx.stroke()

2、lineJoin 在同一个path内，设定线条与线条间接合的样式

有三个可选值：
（1）round: 通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。圆角的半径就是线段的宽度
（2）**bevel：**在相连部分的末端填充一个额外的，以三角形为底的区域，每一个部分都有各自的矩形
（3）miter：(默认) 相连部分的额外边缘，相交于一点，形成一个额外的菱形区域
在这里插入图片描述

<script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        var g = canvas.getContext("2d");//绘制画笔
        var lineJoins = ["round","bevel","miter"];
        g.lineWidth = 20;
        //绘制W
        for (var i = 0; i < lineJoins.length; i++){
            g.lineJoin=	lineJoins[i]
            g.beginPath();
            g.moveTo(50,50 + i * 50)
            g.lineTo(100,100 + i * 50);
            g.lineTo(150,50  +  i * 50);
            g.lineTo(200,100 + i * 50);
            g.lineTo(250,50  +  i * 50);
            g.stroke()
        }
    </script>

3、setLineDash: 绘制虚线

// [实线长度，间隔长度]
ctx.setLineDash([20,5])

4、绘制文本

canvas提供了两种方法来绘制文本
1、ctx.fillText(tetx,x,y,maxwidth) 绘制填充文本
2、ctx.strokeText(tetx,x,y,maxwidth) 绘制轮廓文本
在这里插入图片描述

5、绘制图片:

canvas提供了一个方法：drawImage(img,x.y)
ctx.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh)
img:图像源
sx,sy,sw,sh:源图像切片位置和大小
dx,dy,dw,dh:定义切片的目标显示位置和大小

四、save与restore

save(): 保存画布(canvas)的所有状态
restore(): 恢复画布(canvas)的所有状态

五、变换 API

在这里插入图片描述
（一）translate和css3中的区别？
canvas的会进行累加，css3的不会； translate：移动的是原点

六、合成 API

合成： 在前面的所有例子中，我们总是将一个图形画在另一个之上，对于其他更多的情况，仅仅这样是远远不够的。比如，对合成的图形来说，绘制顺序会有限制。不过，我们可以利用
在这里插入图片描述

globalCompositeOperation 定义和用法

globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标的图像上

（一）源对象：

        source-over:默认值 在源图像上面,新的图层比较高
        source-in:是指留下源图像与目标图像重叠部分(相交部分)
        source-atop:砍掉目标溢出部分
        source-out:只留下源超过目标的部分
        顺序限制 只能放在图形绘制之前
        ctx.globalCompositeOperation = "source-out";

（二）目标：

        destination-over:目标在上面,旧的图层高
        destination-in:是指留下源图像与目标图像重叠部分(相交部分)
        destination-atop:砍掉目标溢出来的部分
        destination-out:留下目标超出的部分
   		globalAlpha透明度

案例—绘制月亮

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas合成</title>
    <style type="text/css">
        *{margin: 0px;padding: 0px;}
        /* canvas的默认颜色不是白色，默认颜色是根页面颜色一样 */
        html,body{background-color: pink;}
        #mycanvas{background-color: black;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}
    </style>
</head>
<body>
    <canvas id="mycanvas" width="400" height="400"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        var ctx = canvas.getContext("2d");
        
        ctx.save();
        ctx.fillStyle="#fff";
        ctx.beginPath();
        ctx.arc(200,200,100,2*Math.PI,false);
        ctx.fill();

        ctx.save();
        ctx.beginPath();
        ctx.globalCompositeOperation = "destination-out"
        ctx.fillStyle = "red";
        ctx.arc(150,200,100,2*Math.PI,false);
        ctx.fill();
        ctx.restore();//释放
    </script>
</body>
</html>

Canvas动画

（一）动画的基本步骤

1、清空canvas再绘制每一帧动画之前，需要清空所有，清空所有最简单的做法是clearRect()方法
2. 保存 canvas 状态如果在绘制的过程中会更改 canvas 的状态(颜色、移动了坐标原点等),又
在绘制每一帧时都是原始状态的话，则最好保存下 canvas 的状态
3. 绘制动画图形这一步才是真正的绘制动画帧
4. 恢复 canvas 状态如果你前面保存了 canvas 状态，则应该在绘制完成一帧之后恢复
canvas 状态。
绘制 – 清空 —绘制 —清空。。。。。

控制动画

我们可用通过 canvas 的方法或者自定义的方法把图像会知道到 canvas 上。正常情况，我们能看到绘制的结果是在脚本执行结束之后。例如，我们不可能在一个 for 循环内部完成动画。
4. 也就是，为了执行动画，我们需要一些可以定时执行重绘的方法。
5. 一般用到下面三个方法：
setInterval()
setTimeout()
requestAnimationFrame()