HTML5 Canvas专题

最新推荐文章于 2022-11-08 16:22:43 发布

苦涩2020

最新推荐文章于 2022-11-08 16:22:43 发布

阅读量342

点赞数

分类专栏： HTML5 前端文章标签： html5

本文链接：https://blog.csdn.net/UserPython/article/details/105076925

版权

canvas参考手册

路径方法

beginPath()：开启一条路径，或重置当前路径
closePath()：创建从当前点回到起始点的路径
stroke()：绘制当前路径
fill()：填充当前路径
moveTo()：把路径移动到画布中的指定点，不创建线条
lineTo()：添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）

线条样式

lineCap：设置或返回线条的结束端点样式
1、butt：默认，向线条的每个末端添加平直的边缘
2、round：向线条的每个末端添加圆形线帽
3、square：向线条的每个末端添加正方形线帽
4、“round”和“square”会使线条略微变长，因为加上了线帽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>线条样式</title>
</head>
<body>
	<!-- 创建画布 -->
    <canvas id="canvas02" width="500px" height="200px" style="background: #a9a9a9";>
        您的浏览器不支持canvas标签
    </canvas>
    <script>
        // 线帽（结束端点）
        var myCanvas2 = document.getElementById("canvas02");//获取画布对象
        var myContext2 = myCanvas2.getContext("2d");//设置画布绘图环境
        myContext2.lineWidth = 20;// 设置线宽
        myContext2.strokeStyle = "orange";//设置线的颜色
        myContext2.lineCap = "butt"; //默认线帽
        myContext2.moveTo(90, 50);//设置线条起点
        myContext2.lineTo(400, 50);//设置新的节点
        myContext2.stroke();//绘制线条

        myContext2.beginPath();//开始新的线段
        myContext2.lineCap = "round";
        myContext2.strokeStyle = "red";
        myContext2.moveTo(90, 100);
        myContext2.lineTo(400, 100);
        myContext2.stroke();

        myContext2.beginPath();//开始新的线段
        myContext2.lineCap = "square";
        myContext2.strokeStyle = "blue";
        myContext2.moveTo(90, 150);
        myContext2.lineTo(400, 150);
        myContext2.stroke();
    </script>
</body>
</html>

lineJoin：设置或返回两条线相交时，所创建的拐角类型
1、miter：默认，创建尖叫
2、bevel：创建斜角
3、round：创建圆角

    <canvas id="canvas03" width="500px" height="200px" style="background: #a9a9a9";>
        您的浏览器不支持canvas标签
    </canvas>
    <script>
        // 拐角类型
        var myCanvas3 = document.getElementById("canvas03");
        var cxt3 = myCanvas3.getContext("2d");//设置画布绘图环境
        cxt3.lineWidth = 20;// 设置线宽
        cxt3.strokeStyle = "orange";//设置线的颜色
        cxt3.lineJoin = "miter";//默认
        cxt3.lineJoin = "round";//圆角
        cxt3.lineJoin = "bevel";//斜角
        cxt3.moveTo(100, 50);
        cxt3.lineTo(400, 50);
        cxt3.lineTo(400, 150);
        cxt3.closePath();
        cxt3.stroke();
    </script>

miterLimit：设置或返回最大斜接长度
斜接长度指的是在两条线交汇处内角和外角之间的距离。该属性定义了斜连线长度和线条宽度的最大比率
1、只有lineJoin属性为miter
时，miterLimit才有效
2、边角的角度越小，斜接长度就会越大。为了避免斜接长度过长，我们可以使用miterLimit属性
3、如果斜接长度超过miterLimit的值，边角会以lineJoin的“bevel”类型来显示

矩形

rect(x, y, w, h)：创建矩形
fillRect(x, y, w, h)：绘制填充矩形
strokeRect(x, y, w, h)：绘制无填充矩形
clearRect(x, y, w, h)：在给定的矩形内清除指定的像素

   <canvas id="canvas05" width="500px" height="200px" style="background: #a9a9a9";>
       您的浏览器不支持canvas标签
   </canvas>
   <button onclick="clearCanvas()">清空画布</button>
   <script>
       // 绘制矩形和清空画布
       var myCanvas5 = document.getElementById("canvas05");
       var cxt5 = myCanvas5.getContext("2d");//设置画布绘图环境
       cxt5.lineWidth = 10;// 设置线宽
       cxt5.fillStyle = "red";//填充样色
       cxt5.strokeStyle = "blue";//描边颜色

       cxt5.strokeRect(50, 50, 100, 100);//绘制无填充矩形
       cxt5.fillRect(70, 70, 60, 60);//绘制填充矩形

       // cxt5.clearRect(80, 80, 30, 30);//清除画布
       function clearCanvas(){
    
           cxt5.clearRect(0, 0, 500, 200);
       }
   </script>

圆、圆弧

arc：创建圆、弧、曲线

arc()：创建弧、曲线（用于创建圆形或部分圆）

    <canvas id="canvas06" width="300px" height="600px" style="background: #a9a9a9";>
        您的浏览器不支持canvas标签
    </canvas>
    <script>
        // 绘制圆和圆弧
        var myCanvas6 = document.getElementById("canvas06");
        var cxt6 = myCanvas6.getContext("2d");//设置画布绘图环境
        cxt6.lineWidth = 10;// 设置线宽
        cxt6.fillStyle = "red";//填充样色
        cxt6.strokeStyle = "black";//描边颜色

        //描边圆、空心圆
        cxt6.beginPath();
        cxt6.arc(50, 50, 30, 0, Math.PI*3);
        cxt6.stroke();

        //填充圆
        cxt6.beginPath();
        cxt6.arc(150, 50, 30, 0, Math.PI*2);
        cxt6.fill();

        //同时带有描边和填充的圆
        cxt6.beginPath();
        cxt6.arc(250, 50, 30, 0, Math.PI*2);
        cxt6.fill();
        cxt6.stroke();

        //描边、填充和同时描边与填充的弧线
        //默认值为false：顺时针
        cxt6.beginPath();
        cxt6.arc(50, 150, 30, 0, Math.PI*2/3);
        cxt6.stroke();

        cxt6.beginPath();
        cxt6.arc(150, 150, 30, 0, Math.PI*2/3);
        cxt6.fill();

        cxt6.beginPath();
        cxt6.arc(250, 150, 30, 0, Math.PI*2/3);
        cxt6.fill();
        cxt6.stroke();

        //描边、填充和同时描边与填充的弧线
        //true：逆时针
        cxt6.beginPath();
        cxt6.arc(50, 250, 30, 0, Math.PI*2/3, true);
        cxt6.stroke();

        cxt6.beginPath();
        cxt6.arc(150, 250, 30, 0, Math.PI*2/3, true);
        cxt6.fill();

        cxt6.beginPath();
        cxt6.arc(250, 250, 30, 0, Math.PI*2/3, true);
        cxt6.fill();
        cxt6.stroke();

        //描边、填充和同时描边与填充的弧线
        //true：逆时针
        //封闭路径
        cxt6.beginPath();
        cxt6

最低0.47元/天解锁文章

苦涩2020

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 Canvas专题

HTML5 canvas专题线条样式路径方法矩形线条样式lineCap：设置或返回线条的结束端点样式1、butt：默认，向线条的每个末端添加平直的边缘2、round：向线条的每个末端添加圆形线帽3、square：向线条的每个末端添加正方形线帽4、“round”和“square”会使线条略微变长，因为加上了线帽<!DOCTYPE html><html lang=...
复制链接

扫一扫