Canvas-基础

最新推荐文章于 2024-06-30 20:21:39 发布

小蚂蚁有力量

最新推荐文章于 2024-06-30 20:21:39 发布

阅读量238

点赞数

一、Canvas概念

什么是Canvas？
Canvas是H5新增的一个标签, 我们可以通过JS在这个标签上绘制各种图案；
Canvas 拥有多种绘制路径、矩形、圆形、字符以及图片的方法。
注意点：
2.1canvas标签有默认的宽度和高度，默认的宽度是300px，默认的高度是150px；
2.2不能通过CSS设置画布(canvas)的宽高；通过CSS设置画布宽高会在默认宽高的基础上拉伸；如果需要设置canvas宽高请通过元素行内属性width和height设置，如：<canvas width="500" height="500"></canvas>;
2.3线条默认宽度和颜色
通过canvas绘制的线条默认宽度是1px, 颜色是纯黑色；但是由于默认情况下canvas会将线条的中心点和像素的底部对齐, 所以会导致显示效果是2px和非纯黑色问题；

<head>
    <meta charset="UTF-8">
    <title>01-Canvas开篇</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        canvas{
            background: red;
        }
    </style>
</head>

<body>
    // 1.创建标签
<canvas width="500" height="500"></canvas>
<script>
    // 2.通过js代码拿到canvas标签
    let oCanvas = document.querySelector("canvas");
    
    // 3.从canvas标签中获取到绘图工具
    let oCtx = oCanvas.getContext("2d");
    
    // 4.通过绘图工具在canvas标签上绘制图形
    // 4.1设置路径的起点
    oCtx.moveTo(50, 50);  // 相对于canvas的位置，距左边50px, 距上边50px;
    // 4.2设置路径的终点
    oCtx.lineTo(200, 50);
    // 4.3告诉canvas将这些点连接起来
    oCtx.stroke();
</script>
</body>

二、Canvas线条属性

1.线条相关属性
lineWidth: 线条宽度
strokeStyle: 线条颜色
lineCap: 线末端类型：(butt默认)、round、square

let oCanvas = document.querySelector("canvas");
    let oCtx = oCanvas.getContext("2d");
    // 修改线条的高度
    oCtx.lineWidth = 50;
    // 修改线条的颜色
    oCtx.strokeStyle = "blue";
    // 修改线条的两端样式
    oCtx.lineCap = "round";

2.Canvas多根线条

1.多根线条注意点
如果是同一个路径, 那么路径样式会被重用(第二次绘制会复用第一次的样式);
如果是同一个路径, 那么后设置的路径样式会覆盖先设置的路径样式;

2.如何给每根线条单独设置路径样式?
每根线条都开启一个新的路径即可

 let oCanvas = document.querySelector("canvas");
 let oCtx = oCanvas.getContext("2d");
 oCtx.moveTo(50, 50);
 oCtx.lineTo(200, 50);
 oCtx.lineWidth = 20;
 oCtx.strokeStyle = "blue";
 oCtx.stroke();

 oCtx.beginPath(); // 重新开启一个路径
 oCtx.moveTo(50, 100);
 oCtx.lineTo(200, 100);
 oCtx.lineWidth = 10; // 重新设置当前路径样式
 oCtx.strokeStyle = "red";
 oCtx.stroke();

三、Canvas简单图形

1.closePath
自动创建从当前点回到起始点的路径

2.lineJoin
设置相交线的拐点样式 miter(默认)、round、bevel

 let oCanvas = document.querySelector("canvas");
 let oCtx = oCanvas.getContext("2d");
 oCtx.moveTo(50, 50);
 oCtx.lineTo(200, 50);
 oCtx.lineTo(200, 200);
 // 注意点: 如果通过lineTo来闭合图形, 那么是不能很好的闭合
 // oCtx.lineTo(50, 50);
 
 oCtx.closePath();
 oCtx.lineWidth = 20;
 oCtx.lineJoin = "round";
 // 注意点: 默认情况下不会自动从最后一个点连接到起点
 oCtx.stroke();

四、Canvas填充图形

1.stroke
绘制已定义的路径

2.fill
填充已定义的路径
oCtx.fill();

注意点:

只要没有手动开启新的路径, 那么使用的都是默认路径；如果都是默认路径, 那么设置的样式在同一个路径中都是有效的；

对于同一路径,在填充的时候会遵循非零环绕规则：
从当前的区域拉出一条直线, 遇到顺时针相交的线就+1, 遇到逆时针相交的线就-1；最终计算的结果如何是0就不填充, 如果不是0就填充；

五、Canvas虚线

1.setLineDash
[5,10] 数组是用来描述你的排列方式的;

2.getLineDash
获取虚线的排列方式获取的是不重复的那一段的排列方式;

3.lineDashOffset
设置虚线的偏移位;

let oCanvas = document.querySelector("canvas");
    let oCtx = oCanvas.getContext("2d");
    oCtx.moveTo(100, 100);
    oCtx.lineTo(400, 100);
    oCtx.lineWidth = 20;
    oCtx.strokeStyle = "blue";
    
    // oCtx.setLineDash([5, 20]); // 可传递2或3个参数
    oCtx.setLineDash([5, 10, 20]);
    console.log(oCtx.getLineDash());
    oCtx.lineDashOffset = -50;
    
    oCtx.stroke();

六、Canvas绘制矩形

第一个参数: x的坐标
第二个参数: y的坐标
第三个参数: 矩形的宽度
第四个参数: 矩形的高度

画矩形：

oCtx.rect(100, 100, 200, 200);
oCtx.stroke();

区别：上面的方法需两行代码，下面代码只需一行代码
oCtx.strokeRect(100, 100, 200, 200);、

填充矩形：
oCtx.fillRect(100, 100, 200, 200);

清除画布:
oCtx.clearRect(0, 0, canvasWidth, canvasHeight);

七、Canvas渐变色

渐变背景颜色
和普通的标签一样我们也可以给填充的图形设置线性渐变和径向渐变的背景颜色;
设置图形渐变背景颜色步骤
2.1通过绘图工具创建渐变背景颜色
2.2指定渐变的范围
2.3将渐变背景颜色设置给对应的图形

let oCanvas = document.querySelector("canvas");
    // 从canvas中拿到绘图工具
    let oCtx = oCanvas.getContext("2d");

   // 1.创建一个渐变的方案
    
   //可以通过x0,y0 / x1,y1确定渐变的方向和渐变的范围  
   let linearGradient = oCtx.createLinearGradient(100, 100, 300, 300);
    
   //第一个参数是一个百分比 0~1
   //第二个参数是一个颜色 ```
   linearGradient.addColorStop(0, "green");
   linearGradient.addColorStop(0.5, "yellow");
   linearGradient.addColorStop(1, "blue");

   // oCtx.createRadialGradient();  // 径向渐变
   
   oCtx.fillStyle = linearGradient;
   
   oCtx.fillRect(100, 100, 200, 200);

八、Canvas绘制圆弧

x, y: 确定圆心
radius: 确定半径
startAngle: 确定开始的弧度
endAngle: 确定结束的弧度
Boolean: 默认是false, false就是顺时针绘制, true就是逆时针绘制

context.arc(x, y, radius, startAngle, endAngle, Boolean);

例：
oCtx.arc(100, 100, 100, 0, Math.PI * 2);

补充：颜色随机

function randomColor() {
        let r = Math.floor(Math.random() * 256);
        let g = Math.floor(Math.random() * 256);
        let b = Math.floor(Math.random() * 256);
        return `rgb(${r},${g},${b})`;
    }

九、Canvas绘制文字

     // 4.绘制文字
    let str = "知播渔教育";
    
    // 通过font属性可以设置文字的大小和样式
    oCtx.font = "50px 微软雅黑";
    
    // 通过textBaseline属性可以设置文字垂直方向的对齐方式
    // 注意点: 在对齐的时候是以绘制文字的y作为参考点进行对齐的
    oCtx.textBaseline = "middle";
    
    // 通过textAlign属性可以设置文字水平方向的对齐方式
    // 注意点: 在对齐的时候是以绘制文字的x作为参考点进行对齐的
    oCtx.textAlign = "center";
    
    ///注意点:  在绘制文字的时候, 是以文字的左下角作为参考点进行绘制
 
    // oCtx.strokeText(str, canvasWidth/2, canvasHeight/2);  // 空心的文字
    
    oCtx.fillText(str, canvasWidth/2, canvasHeight/2);

十、Canvas绘制图片

    // 1.拿到canvas
    let oCanvas = document.querySelector("canvas");
    
    // 2.从canvas中拿到绘图工具
    let oCtx = oCanvas.getContext("2d");
    
    // 3.加载图片
    let oImg = new Image();
    
    oImg.onload = function () {
    
    // 如果只有三个参数, 那么第一个参数就是需要绘制的图片
        // 后面的两个参数是指定图片从什么位置开始绘制
        // oCtx.drawImage(oImg, 100, 100);

    // 如果只有五个参数, 那么第一个参数就是需要绘制的图片
        // 后面的两个参数是指定图片从什么位置开始绘制
        // 最后的两个参数是指定图片需要拉伸到多大
        // oCtx.drawImage(oImg, 100, 100, 100, 100);

    // 如果有九个参数, 那么第一个参数就是需要绘制的图片
        // 最后的两个参数是指定图片需要拉伸到多大
        // 第6~7个参数指定图片从什么位置开始绘制
        // 第2~3个参数指定图片上定位的位置
        // 第4~5个参数指定从定位的位置开始截取多大的图片
        oCtx.drawImage(oImg, 50, 50, 100, 100, 100, 100, 100, 100);
        
    }
    
    oImg.src = "images/lnj.jpg";

十一、Canvas形变

平移、旋转、缩放

     // 1.拿到canvas
    let oCanvas = document.querySelector("canvas");
    
    // 2.从canvas中拿到绘图工具
    let oCtx = oCanvas.getContext("2d");
    
    // 注意点: 在canvas中所有的形变属性操作的都是坐标系（即canvas的左上角为原点，上边线为x轴，左边线是y轴）, 而不是图形
    //平移：
    // oCtx.translate(100, 0);
    // oCtx.translate(0, 100);
    // oCtx.translate(100, 100);
    //旋转：
    // oCtx.translate(200,100);  可改变旋转的原点位置
    // oCtx.rotate(Math.PI/6);
	//缩放：
    oCtx.scale(0.5, 1);   // 坐标系的x轴缩小一半，y轴不变
    
    // 3.绘制一个矩形
    oCtx.strokeRect(100, 100, 200, 100);

十二、Canvas事件监听

因为整个canvas是一个标签, 所以只能通过监听鼠标在canvas上的位置来判断是否需要处理对应的图形;
当然也可以通过第三方框架来解决交互问题。诸如: zrender.js / Knova.js /three.js / egret.js / pixi.js等等；

注意点:
isPointInPath方法如果开启了一个新的路径, 那么判断的就是点是否在新的路径的图形中;

console.log(oCtx.isPointInPath(x, y)); // 判断触发（点击）的位置是否在目标区域内。返回值为false / true ;

小蚂蚁有力量

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas-基础

一、Canvas概念什么是Canvas？Canvas是H5新增的一个标签, 我们可以通过JS在这个标签上绘制各种图案；Canvas 拥有多种绘制路径、矩形、圆形、字符以及图片的方法。注意点：2.1canvas标签有默认的宽度和高度，默认的宽度是300px，默认的高度是150px；2.2不能通过CSS设置画布的宽高；通过CSS设置画布宽高会在默认宽高的基础上拉伸；如果需要设置ca...
复制链接

扫一扫