【一篇通】H5 Canvas

news2025/2/23 20:01:10

文章目录

- - - Canvas的创建(HTMLCanvasElement)
    - 图形绘制：H5为Canvas对应的2D上下文Context提供了一系列的画图接口
    - 保存save、恢复restore、变换Transformations

Canvas的创建(HTMLCanvasElement)

定义canvas HTML元素，默认长宽300x150

<canvas width="300" height="150" >
    你的浏览器不支持Canvas
</canvas>

通过JavaScript脚本创建

let canvas = document.createElement("canvas");

图形绘制：H5为Canvas对应的2D上下文Context提供了一系列的画图接口

获取Context(CanvasRenderingContext2D)

let context = canvas.getContext("2d");

矩形的绘制（填充、清除、轮廓）(x坐标,y坐标,宽度,高度)

context.fillStyle = "rgb(200,0,0)"; // 设置填充颜色
context.strokeStile = "rgb(0,200,0)" // 设置轮廓颜色
context.fillRect (90, 90, 190, 190);// 填充一个大区域
context.clearRect(130,130,110,110);// 清除中间一个区域
context.strokeRect(150,150,70,70);// 在清除的区域中画一个矩形轮廓

在这里插入图片描述

直线的绘制（需要借助stroke函数）

context.strokeStyle="purple"; //设置线条颜色
context.lineCap="round";//端点样式为圆形
context.lineWidth=10;//线条宽度10
context.moveTo(10,10);//线条开始左边
context.lineTo(200,120);//线条结束坐标
context.stroke()// 借助stroke显示线条

在这里插入图片描述

圆弧的绘制（填充、轮廓，需要借助fill,stroke函数）(x坐标,y坐标,半径,开始弧度,结束弧度,是否逆时针)

context.beginPath();// 开启一个新路径
context.fillStyle='yellow' // 上面大半圆填充为黄色
context.arc(75, 75, 50, 0, Math.PI, true);
context.fill() // 填充让上面大半圆显示出来
context.beginPath();//如果没有这一行，最后填充将使用下面pink
context.fillStyle='pink' // 下面半圆填充为粉色
context.strokeStyle='black' // 下面半圆轮廓为黑色
context.arc(75, 75, 35, 0, Math.PI, false);//顺时针绘制下面小半圆
context.fill();// 显示下半圆填充
context.stroke();// 只对下面半圆画轮廓

在这里插入图片描述

图片绘制

context.fillStyle='pink';
context.fillRect(0,0,300,150)
// context.drawImage(img,srcx,srcy);
context.drawImage(img,10,10);

在这里插入图片描述

context.fillStyle='pink';
context.fillRect(0,0,300,150)
// context.drawImage(img,srcx,srcy,src,srcwith,srcheight);
context.drawImage(img,10,10,100,100);

在这里插入图片描述

context.fillStyle='pink';
context.fillRect(0,0,300,150)
// context.drawImage(img,srcx,srcy,srcw,srch,dstx,dsty,dstw,dsth);
context.drawImage(img,20,20,110,110,90,10,120,120);

在这里插入图片描述

渐变绘制（需要借助fill/fillRect函数）

let linGrad = context.createLinearGradient(0, 0, 250, 0);// 渐变方向，水平方向从左往右
linGrad.addColorStop(0, "lime");
linGrad.addColorStop(0.5, "navy");
linGrad.addColorStop(1, "pink");
context.fillStyle = linGrad;
context.fillRect(10, 10, 280, 120); // 填充渐变

在这里插入图片描述

保存save、恢复restore、变换Transformations

保存save和恢复restore结对使用，用于将当前canvas的状态（旋转，缩放，迁移）进行入栈保存/出栈恢复操作
translate 改变坐标原点

context.fillStyle='red';
context.fillRect(0,0,300,150);

context.save(); // 保存当前canvas状态，坐标原点为0，0

context.translate(150,75); //将坐标迁移道中心点150，75
context.fillStyle='silver';
context.fillRect(0,0,300,150);//此时0，0 相对于新坐标原点150，75

context.restore(); //恢复到坐标原点为0，0
context.fillStyle='pink';
context.fillRect(0,0,60,60);

在这里插入图片描述

scale x,y坐标缩放

context.fillStyle='red';
context.fillRect(0,0,300,150);

context.save(); // 保存当前canvas状态，坐标比例1：1

context.scale(.5,.5); //缩小为原来坐标的一半，1：0.5
context.fillStyle='silver';
context.fillRect(0,0,300,150);//此时300相当于150,150相当于75

context.restore(); //恢复到坐标比例1：1
context.fillStyle='pink';
context.fillRect(0,0,60,60);

在这里插入图片描述

rotate 图形旋转

context.lineWidth=5;
// 没有旋转下 水平画紫色线
context.beginPath();
context.strokeStyle="purple"; 
context.moveTo(10,10);
context.lineTo(300,10);
context.stroke()

context.save(); // 保存当前canvas状态，没有旋转
// 旋转下，水平画黑线
context.rotate(Math.PI/4); //将坐标旋转45度
context.beginPath();
context.strokeStyle="black"; 
context.moveTo(10,10);
context.lineTo(300,10);
context.stroke()

context.restore(); //恢复到不旋转
// 没有旋转下 水平画绿色线
context.beginPath();
context.strokeStyle="green"; 
context.moveTo(10,20);
context.lineTo(300,20);
context.stroke()