Canvas

最新推荐文章于 2023-07-05 19:11:54 发布

weixin_47285507

最新推荐文章于 2023-07-05 19:11:54 发布

阅读量156

点赞数

分类专栏：笔记文章标签： canvas

本文链接：https://blog.csdn.net/weixin_47285507/article/details/106172352

版权

笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.什么是Canvas

1.1Canvas是H5新增的一个标签，可以通过js在这个标签上绘制各种图案
1.2Canvas拥有多种绘制路径、矩形、圆形、字符以及图片的方法。

2基本操作步骤

//1.添加标签
<Canvas></Canvas>
<script>
//2拿到Canvas标签
let oCanvas = document.querySelector("Canvas");
//3获取到绘图工具
let oCtx  = oCanvas.getContext("2d");
//4.通过绘图工具在Canvas标签上绘制图形
//4.1 设置路径起点
oCtx.moveTo(50,50);
//4.2设置路径的终点
oCtx.lineTo(200,50);
//4.3告诉Canvas将这些路径连接起来
oCtx.stroke();
</script>

3.注意点

3.1默认宽度300px,高150px;
3.2不能通过css设置画布宽高，会在默认基础上拉伸；通过行内属性（width和height）来设置
3.3线条默认宽度是1px，默认颜色是黑色；因为线条的中心点和像素的底部对齐（显示是2px,非纯黑色）
3.4

4.多线条

1.多线条之间会相互影响，所以需要重新开启路径和重新设置样式

//重新开启路径
oCtx.beginPath();
oCtx.closePath(); //关闭路径
//设置样式
oCtx.linewidth = 10;
oCtx.stokeStyle = “red”;

2.设置相交线拐点的样式(闭合图形)

默认情况下不会从起点链接到终点
miter(默认)，round,bevel
oCtx.lineJoin=“round”;

5.填充规则

·结果为0就不填充，不为0就填充

6.绘制折线图再进行封装（课程6）

 	
    let oCanvas = document.querySelector("Canvas");
    //2.拿到绘图工具
    let oCtx = oCanvas.getContext("2d");
    //3.绘制表格
    //3.1设置每个大小
    let gridSize =20;
    //3.2拿到Canvas宽高
    let canvasWidth = oCtx.canvas.width;
    let canvasHeight = oCtx.canvas.height;
    //3.3计算垂直方向和水平方向可以绘制多少条横线
    let row = Math.floor(canvasHeight/gridSize);
    let col = Math.floor(canvasWidth/gridSize);
    //3.4绘制横线
    for(let i=0; i<= row; i++){
        oCtx.beginPath();
        oCtx.moveTo(0,i*gridSize-0.5);
        oCtx.lineTo(canvasWidth,i*gridSize-0.5);
        oCtx.stokeStyle = "#ccc";
        oCtx.stroke();
    }
    for(let i=0; i<=col; i++){
        oCtx.beginPath();
        oCtx.moveTo(i*gridSize-0.5,0);
        oCtx.lineTo(i*gridSize-0.5,canvasHeight);
        oCtx.stokeStyle = "#ccc";
        oCtx.stroke();
    }

    // //4.绘制坐标轴
    oCtx.beginPath();
     //4.1找到原点,终点位置
    let originX = gridSize;
     let originY = canvasHeight-gridSize;
     let endX = canvasWidth-gridSize;
     //4.1绘制横坐标
     oCtx.moveTo(originX,originY);
    oCtx.lineTo(endX,originY);

~~不知道为什么设置颜色没有效果~~

7.渐变背景颜色

和普通的标签一样我们也可以给填充的图形设置线性渐变和径向渐变的背景颜色

7.1设置图形渐变背景颜色步骤

1.通过绘图工具创建渐变背景颜色
2.指定渐变范围
3.将渐变背景颜色设置给对应的图形

//确定渐变的方向和范围
let linearGradient = oCtx.crateLineraGradient(100,100,300,300);
//设置颜色
linearGradient.addColorStop(0,"red");
linearGradient.addColorStop(0.5,"yellow");
linearGradient.addColorStop(1,"blue");
//3
oCtx.fillStyle=linearGradient;
oCtx.fillRect(100,100,300,300);