canvas基础使用2【入门教程】

编程语言 2023-09-06 20:19:23 阅读次数: 0

文章目录

上篇请看canvas基础使用1

一、转换

转换

  • 在canvas内，也可以像css一样有一些类似于css2D转换的效果
  1. 位移
    • 语法：ctx.translate(x, y)
    • 注意：一定要在绘制（描边或填充）之前，进行位移
  2. 缩放
    • 语法：ctx.scale(x, y)
    • 注意：一定要在绘制（描边或填充）之前，进行缩放
  3. 旋转
    • 语法：ctx.rotate(弧度值)
      • 角度转弧度公式：弧度 = Math.PI/180*角度
    • 注意：一定要在绘制（描边或填充）之前，进行旋转
    • 旋转的圆心为画布的 0，0 点，可以配合 位移 修改旋转的中心

image.png

  1. 注意：
    • canvas所有的转换操作都不只是在操作某个形状，而是对整个画布进行转换
    • 如果需要对多个形状进行不同的转换，在每次绘制之前都需要先保存画笔状态，绘制之后重置画笔状态
      • 保存画笔状态：ctx.save();
        • 一般存在与转换之前
      • 重置画笔状态：ctx.restore();
        • 一般存在于转换之后
// 绘制两个矩形
ctx.strokeRect(100, 100, 100, 100);
ctx.strokeRect(300, 100, 100, 100);

截屏2023-07-09 22.15.46.png

// 对画布进行旋转
ctx.rotate(0.5);
ctx.strokeRect(100, 100, 100, 100);
ctx.strokeRect(300, 100, 100, 100);

截屏2023-07-09 22.16.52.png

// 将 旋转和其中一个矩形绘制 存储为一次记录
ctx.save();
ctx.rotate(0.5);
ctx.strokeRect(100, 100, 100, 100);
ctx.restore();

ctx.strokeRect(300, 100, 100, 100);

截屏2023-07-09 22.18.05.png

二、渐变色

  1. canvas的渐变色，就是提前配置好渐变色方案（从颜色1向颜色2过渡），然后将渐变色方案，设置给填充样式即可
  2. 渐变形式
    • 线性渐变
      • 创建渐变：const lg = ctx.createLinearGradient(起点x坐标, 起点y坐标, 终点x坐标, 终点y坐标)
        • 指定渐变范围
      • 添加渐变色：lg.addColorStop(0, 'red')
        • 向指定位置添加颜色，0表示开始坐标，1表示结束坐标，中间部分会自动填充渐变色
  const canvas = document.querySelector(".mycanvas");

  canvas.width = 800;
  canvas.height = 400;

  const ctx = canvas.getContext("2d");

  const lg = ctx.createLinearGradient(0, 0, 800, 400);
  
  lg.addColorStop(0, 'red');
  lg.addColorStop(1, 'green');

  ctx.fillStyle = lg;
  ctx.fillRect(0, 0, 800, 400);

截屏2023-07-09 22.47.33.png

  • 径向渐变
    • 创建渐变：const lg = ctx.createRadialGradient(x1, y1, r1, x2, y2, r2);
      • x1：起始圆圆心 x 轴坐标
      • y1：起始圆圆心 y 轴坐标
      • r1：起始圆半径
      • x2：终止圆圆心 x 轴坐标
      • y2：终止圆圆心 y 轴坐标
      • r2：终止圆半径
    • 添加渐变色：lg.addColorStop(0, 'red')
      • 同线性渐变
const canvas = document.querySelector(".mycanvas");

canvas.width = 800;
canvas.height = 400;

const ctx = canvas.getContext("2d");

const lg = ctx.createRadialGradient(200, 200, 50, 200, 200, 200);

lg.addColorStop(0, 'red');
lg.addColorStop(1, 'green');

ctx.fillStyle = lg;
ctx.fillRect(0, 0, 800, 400);

截屏2023-07-09 22.53.54.png

  1. 多区域不同渐变
    • 本质为配置多套渐变方案，绘制到不同的形状
const canvas = document.querySelector(".mycanvas");

canvas.width = 800;
canvas.height = 400;

const ctx = canvas.getContext("2d");

const rg = ctx.createRadialGradient(200, 200, 50, 200, 200, 200);
rg.addColorStop(0, 'red');
rg.addColorStop(1, 'green');

ctx.fillStyle = rg;
ctx.fillRect(0, 0, 400, 400);

const lg = ctx.createLinearGradient(400, 0, 800, 0);
lg.addColorStop(0, 'blue');
lg.addColorStop(1, 'yellow');
ctx.fillStyle = lg;
ctx.fillRect(400, 0, 400, 400);

截屏2023-07-09 23.03.24.png

三、贝塞尔曲线

  • 贝塞尔曲线（Bezier curve）是计算机图形学中相当重要的参数曲线，它通过一个方程来描述一条曲线，根据方程的最高阶数，又分为线性贝赛尔曲线，二次贝塞尔曲线、三次贝塞尔曲线和更高阶的贝塞尔曲线。
    • 贝塞尔曲线需要提供几个点的参数，首先是 曲线的起点和终点
    • 如果控制点数量为 0，我们称之为线性贝塞尔；
    • 控制点数量为 1，则为二阶贝塞尔曲线；
    • 控制点数量为 2，则为三阶贝塞尔曲线，依此类推。
  1. 二阶贝塞尔曲线
    • 其实就是由 三个点 绘制成两个直线
    • 然后同时从每条直线的起点开始，向终点移动，按比例拿到点。然后将这些点再连接，产生 n - 1 条直线。
    • 就这样，我们继续同样的操作的，直到变成一条直线，然后再按比例取到一个点，这个点就是曲线经过的点。
    • 当我们比例一点点变大（从 0 到 1），就拿到了曲线中间的所有点，最终绘制出完整的曲线。

扫描二维码关注公众号，回复： 16485820 查看本文章
  1. 再来看看三阶贝塞尔曲线
    • 和二阶贝塞尔曲线是一个道理，只不过控制点数量变成了两个

  1. 在canvas中不需要我们手动计算这么多点，canvas直接提供了相关的API
    • 二阶贝塞尔曲线：ctx.quadraticCurveTo(p1x, p1y, p2x, p2y)
    • 三阶贝塞尔曲线：ctx.bezierCurveTo(p1x, p1y, p2x, p2y, p3x, p3y)
    • 在此之前需要先使用 moveTo 确定 p0 的位置

二阶

const cvs = document.querySelector(".cvs");
cvs.width = 400;
cvs.height = 400;

const ctx = cvs.getContext("2d");

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.quadraticCurveTo(300, 200, 200, 300);
ctx.stroke();

image.png
三阶

const cvs = document.querySelector(".cvs");
cvs.width = 400;
cvs.height = 400;

const ctx = cvs.getContext("2d");

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.bezierCurveTo(60, 80, 150, 30, 170, 150);
ctx.stroke();

image.png
多阶

ctx.beginPath();
ctx.moveTo(75, 25);
ctx.quadraticCurveTo(25, 25, 25, 62.5);
ctx.quadraticCurveTo(25, 100, 50, 100);
ctx.quadraticCurveTo(50, 120, 30, 125);
ctx.quadraticCurveTo(60, 120, 65, 100);
ctx.quadraticCurveTo(125, 100, 125, 62.5);
ctx.quadraticCurveTo(125, 25, 75, 25);
ctx.stroke();

ctx.moveTo(75, 40);
ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
ctx.fill();

四、绘制图片

  1. 创建图片（非canvas操作）
    • 创建图片对象：const img = new Image();
    • 设置资源地址：img.src = "图片地址"
    • 资源加载完成：img.onload = function(){ / * 图片加载完成 */ }
  2. 将图片绘制到canvas
    • 三个参数：gd.drawImage(图片对象, x, y)
      • 从画布的 x，y 坐标开始绘制
const canvas = document.querySelector(".mycanvas");

canvas.width = 800;
canvas.height = 400;

const ctx = canvas.getContext("2d");

const img = new Image();
img.src = "../1.png";

img.onload = function(){
    
    
  ctx.drawImage(this, 0, 100);
}

截屏2023-07-09 23.18.25.png

  • 五个参数：gd.drawImage(图片对象, x, y, w, h)
    • 从画布的 x，y 坐标开始绘制，绘制到 宽w，高h 的区域
const canvas = document.querySelector(".mycanvas");

canvas.width = 800;
canvas.height = 400;

const ctx = canvas.getContext("2d");

const img = new Image();
img.src = "../1.png";

img.onload = function(){
    
    
  ctx.drawImage(this, 0, 100, 200, 200);
}

截屏2023-07-09 23.18.59.png

  • 九个参数：gd.drawImage(图片对象, sx, sy, sw, sh, dx, dy, dw, dh)
    • s = source 原图 位置 宽高
    • d = destination 目标（画布）画在哪，画多大
const canvas = document.querySelector(".mycanvas");

canvas.width = 800;
canvas.height = 400;

const ctx = canvas.getContext("2d");

const img = new Image();
img.src = "../1.png";
// 图片资源宽高
const imgW = 128;
const imgH = 194;
img.width = 128;
img.height = 194;

img.onload = function(){
    
    
  ctx.drawImage(this, 0, 0, imgW/4, imgH/4, 0, 100, imgW/4, imgH/4);
}

截屏2023-07-09 23.20.21.png

五、事件

  1. canvas内没有事件系统，只能通过给canvas元素添加事件，配合事件对象，手动检测事件区域
  2. 矩形检测公式：
    • 点击x > 矩形x && 点击x < 矩形x + 矩形w && 点击y > 矩形y && 点击y < 矩形y + 矩形h
  3. 圆形检测公式：
    • 利用勾股定理：a^2 + b^2 = c^2
    • a = 圆心x - 点击x
    • b = 圆心y - 点击y
    • c = Math.sqrt( a * a + b * b )
    • 若 c < r ，则在圆形区域内
  4. 自动检测
    • ctx.isPointInPath(x, y)
    • 返回值：布尔值，表示指定坐标是否在一个路径范围内

六、导出（了解）

download.onclick = function(){
    
    
  // 将canvas数据转成base64数据
  const base64 = canvas.toDataURL("image/png");
  // 将base64数据解码
  const strBase64 = atob( base64.split(",")[1] );
  // 创建utf-8原始数据（长度为base64解码后的字符长度）
  const utf_8 = new Uint8Array(strBase64.length);
  // 将base64解码后的数据转成Unicode编码后，存入utf-8数组
  for(let n=0;n<strBase64.length;n++){
    
    
    utf_8[n] = strBase64.charCodeAt(n)
  }
  // 根据utf-8数据，创建文件对象
  const file = new File([utf_8], "测试图片", {
    
    type:"image/png"});
  // 根据文件对象创建url字符
  const href = URL.createObjectURL(file);
  // 准备a标签，用于下载文件
  const a = document.createElement("a");
  a.href = href;
  a.download = "测试图片";
  document.body.appendChild(a);
  a.click();
  // 删除a标签
  a.remove();
  // 释放指向文件资源的url字符
  URL.revokeObjectURL(href);
}

七、总结

  • 位移：ctx.translate(x, y)
  • 旋转：ctx.rotate(弧度值)
  • 缩放：ctx.scale(x, y)
  • 保存画笔状态：ctx.save()
  • 重置画笔状态：ctx.restore()
  • 创建线性渐变：ctx.createLinearGradient(起点x坐标, 起点y坐标, 终点x坐标, 终点y坐标)
  • 创建径向渐变：const lg = ctx.createRadialGradient(x1, y1, r1, x2, y2, r2);
  • 添加渐变色：lg.addColorStop(0, 'red')
  • 绘制图片：gd.drawImage(图片对象, x, y)
  • 检测指定坐标是否在某个路径范围内：ctx.isPointInPath(x, y)

八、练习

  1. 机械时钟
  2. 运动的小人
  3. 飞机大战
  4. 折线图

猜你喜欢

转载自blog.csdn.net/weixin_41636483/article/details/132024621
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
周排行
Python环境安装与基础语法（1）——计算机基础知识
IMU预积分
ADAS中的LDW、FCW、BSD、LCA、ACC、AEB、APA、DMS代表的含义
B站笔试两道题
skyeye arm 硬件虚拟机环境的搭建
Web前端静态页面示例
数组-合并排序数组 II-简单
springcloud之版本问题启动报错
面向对象-------------匿名对象(六)
输入URL到页面呈现中间发生了什么？
每日归档
更多
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022