时间戳

首页 > 技术文章 > canvas 个人简约笔记

canvas 个人简约笔记

gimi9527 2020-09-19 01:57 原文

canvas 个人简约笔记

  • 基础代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 画布 -->
    <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
        Your browser does not support the HTML5 canvas tag.
    </canvas>

</body>
</html>

路径

基本的

        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");

        ctx.beginPath();
        ctx.lineWidth = "10"; //线条的肥瘦
        ctx.strokeStyle = "red"; // 红色路径
        ctx.moveTo(0, 75);  
        ctx.lineTo(250, 75);
        ctx.stroke(); // 进行绘制

        ctx.beginPath(); //线条的开始
        ctx.strokeStyle = "blue"; // 蓝色路径
        ctx.lineWidth = "2";  //线条的肥瘦
        ctx.moveTo(50, 0);  //起点坐标，把路径移动到画布中的指定点
        ctx.lineTo(150, 130); //下一个点 的坐标
        ctx.lineTo(100, 30);  //下一点的坐标
        ctx.closePath(); //闭合路径。
        
        ctx.fillStyle="green"; 
        ctx.fill(); //填充
        ctx.stroke(); // 进行绘制 ，必须

ctx.clip() 只有裁剪区域是可见的

        //关键代码如下
        ctx.rect(50,20,200,120);// (x,y,宽，高)
        ctx.stroke();
        ctx.clip(); //在它下面的代码，都要被裁剪
        // Draw red rectangle after clip()
        ctx.fillStyle="green";
        ctx.fillRect(0,0,150,100);

ctx.quadraticCurveTo() 二次贝塞尔曲线

        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.beginPath();
        ctx.moveTo(20,20);// 开始点
        ctx.quadraticCurveTo(20,100,200,20);//(20,100,*,*)控制点，(*,*,200,20)结束点
        ctx.stroke();

ctx.bezierCurveTo() 三次贝塞尔曲线

        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.beginPath();
        ctx.moveTo(20,20);//开始点
        ctx.bezierCurveTo(20,100,200,100,200,20);//(20,100...)控制点1  (...,200,100，...)控制点2  (...,200,20)结束点  
        ctx.stroke();

ctx.arc() 创建弧/曲线（用于创建圆或部分圆）

        ctx.beginPath();
        ctx.arc(100,75,50,0,2*Math.PI);//(圆心x,圆心y,半径,起始角度，结束角度)
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(100,75,50,90/360*2*Math.PI,1*Math.PI,true); //默认是false 顺时针 true为逆时针
        ctx.stroke();

ctx.arcTo() 创建介于两个切线之间的弧/曲线。

        ctx.beginPath();
        ctx.moveTo(20,20);           // 创建开始点
        ctx.lineTo(100,20);          // 创建水平线
        ctx.arcTo(150,20,150,70,50); // 创建弧 (起点x,起点y,终点x,终点y,半径)
        ctx.lineTo(150,120);         // 创建垂直线  
        ctx.stroke();

ctx.isPointInPath(20,50)

  • 如果指定的点位于当前路径中，则返回 true，否则返回 false

矩形

ctx.rect()、ctx.fillRect()、ctx.strokeRect()、ctx.clearRect()

        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");

        ctx.beginPath();
        //最右边的这个矩形
        ctx.strokeRect(250,70,50,50); //绘制矩形（不填色）。笔触的默认颜色是黑色。
        ctx.lineWidth="6";
        ctx.strokeStyle="red";
        //红色边框的矩形
        ctx.rect(20,20,100,20); //（左上角x,左上角y,宽，高）。红色线条的那个
        ctx.stroke(); //  rect默认是没有线条的，若加了线条，也要加 ctx.stroke(); （个人理解）
        
        //全黑的矩形
        ctx.fillRect(50,50,150,50); //填充矩形，默认黑色。直接这样即可，因无线条。

        //红色被扣掉的矩形
        ctx.fillStyle="red"; 
        ctx.fillRect(100,100,150,50); 
        ctx.clearRect(120,120,25,25);  //清空给定矩形内的区域

线条样式

ctx.lineCap( butt | round | square ) 属性设置或返回线条末端线帽的样式。ctx.lineWidth 线条宽度

        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");

        ctx.beginPath();
        ctx.lineCap="round"; //向线条的每个末端添加圆形线帽
        // 看第二个、第三个就知道了
        // ctx.lineCap="butt | square";  //默认。正方形。两个值的都是正方形
        ctx.lineWidth=15
        ctx.moveTo(20,20);  
        ctx.lineTo(100,100);
        ctx.stroke();

ctx.lineJoin( miter | round | bevel ) 属性设置或返回所创建边角的类型，当两条线交汇时。

        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");

        // ctx.lineJoin="miter"; //尖角。第一个
        ctx.lineJoin="round"; // 圆角。第二个
        // ctx.lineJoin="bevel"; //斜角。第三个。调  ctx.lineWidth=30 可看到明显效果
        ctx.moveTo(120,20);
        ctx.lineWidth=10
        ctx.lineTo(200,50);
        ctx.lineTo(120,100);
        ctx.stroke();

ctx.miterLimit 属性设置或返回最大斜接长度

        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");

        ctx.lineWidth=10;
        ctx.lineJoin="miter"; //只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效
        ctx.miterLimit=5;   //第一个。意思是，在两条线交汇处内角和外角之间的距离 不得超过5
        // ctx.miterLimit=3; //第二个。若超过限制时，以 bevel 显示
        ctx.moveTo(20,20);
        ctx.lineTo(50,27);
        ctx.lineTo(20,34);
        ctx.stroke();

推荐阅读