canvas

  • 该标签需要配合js一起使用
  • 可以绘制三角形、矩形、圆形等多种图案
  • 常用于游戏、动画、可视化数据等工作场景
  • 可以直接使用canvas标签测试出是否兼容
html 复制代码
<canvas width="500" height="500" style="border:1px solid">
    请使用支持canvas的主流浏览器查看
</canvas>

基本使用

  • index.html
html 复制代码
<canvas width = "500" height = "500" id = "cvs"></canvas> 
  • 三角形
js 复制代码
   const c = document.getElementById("cvs");
    // 三角形 起笔坐标(X,Y)
    c.moveTo(50, 50);
    // 点1
    c.lineTo(100, 100);
    // 点2
    c.lineTo(0, 100);
    // 点3
    c.closePath(); // 回到起笔位置 等同于 c.lineTo(50, 50);
    // 连接点位
    c.stroke();
  • 四边形
js 复制代码
   const c = document.getElementById("cvs");
     /* ... */
    // 清除路径
    c.beginPath();

    // 四边形
    c.moveTo(200, 200);
    // 点1
    c.lineTo(300, 200);
    // 点2
    c.lineTo(300, 300);
    // 点3
    c.lineTo(200, 300);
    // 点4
    c.lineTo(200, 200);

    c.lineWidth = '0';
    // 线条交界处样式
    c.lineJoin = 'miter'; // 'round' 圆角 'bevel' 斜切角
    // 线条折转样式
    c.lineCap = 'butt'; // 'round' 圆形 'square' 方形
    // 线条样式
    c.strokeStyle = '#000';
    // 填充
    // c.fill();
    // 连接点位
    c.stroke();

使用接口

  • 四边形
js 复制代码
    const c = document.getElementById("cvs");
    // 参数: (x, y, width, height)
    c.fillRect(100, 200, 100, 100);   // 填充四边形 左
    c.rect(200, 200, 100, 100);       // 无边无填充四边形 中  (看不见,但是存在)
    c.strokeRect(300, 200, 100, 100); // 边框四边形 右
  • 清空四边形画布
js 复制代码
// 参数: (x,y,width,height)
c.clearRect(0, 0, 500, 500);
  • 圆形
js 复制代码
    const c = cRef.current.getContext('2d');
    // 参数: (x, y , 正右(3点钟)方向为起点, Math.PI / 180 * 角度, 是否顺时针方向)
    c.arc(250, 250, 100, 0, Math.PI * 2, true);
    c.stroke();

样式保存

js 复制代码
    const c = cRef.current.getContext('2d');
    c.lineWidth = 2;
    c.strokeStyle = 'green';
    // 保存样式
    c.save();
    // 画个圆
    c.arc(100, 100, 100, 0, Math.PI * 2, true);
    // 重新起笔 (x + r, y)    (没有设置这个就会有图1的情况)
    c.moveTo(350, 250); // 下一个圆的圆心点 + 半径 就是它X轴的起点位置 
    // 重新画个圆
    c.arc(250, 250, 100, 0, Math.PI * 2, true);
    // 读取之前的样式
    c.stroke();
js 复制代码
    const c = cRef.current.getContext('2d');
    c.lineWidth = 2;
    c.strokeStyle = 'green';
    // 保存样式
    c.save();
    // 画个圆
    c.arc(100, 100, 100, 0, Math.PI * 2, true);

    // 清除路径
    c.beginPath();
    // 重新画个圆
    c.arc(250, 250, 100, 0, Math.PI * 2, true);
    // 读取之前的样式渲染
    c.stroke();

旋转、移动(连续使用效果可以叠加)

js 复制代码
c.translate(x, y); // 移动
c.rotate((Math.PI / 180) * 角度);  // 旋转
相关推荐
码上暴富13 分钟前
Echarts雷达图根据数值确定颜色
前端·javascript·echarts
Mintopia26 分钟前
在混沌宇宙中捕捉错误的光——Next.js 全栈 Sentry / LogRocket
前端·javascript·next.js
Mintopia28 分钟前
长文本 AIGC:Web 端大篇幅内容生成的技术优化策略
前端·javascript·aigc
VueVirtuoso28 分钟前
SaaS 建站从 0 到 1 教程:Vue 动态域名 + 后端子域名管理 + Nginx 配置
前端·vue.js·nginx
少年阿闯~~35 分钟前
transition(过渡)和animation(动画)——CSS
前端·css·动画·过渡
Async Cipher37 分钟前
CSS 继承 (Inheritance)
前端·css
祈祷苍天赐我java之术1 小时前
Vue 整体框架全面解析
前端·javascript·vue.js
洛小豆1 小时前
Git 打标签完全指南:从本地创建到远端推送
前端·git·github
世间小小鱼2 小时前
【爬坑指南】亚马逊文件中心 AWS S3 预签名URL 前端直传
前端·云计算·aws
华仔啊2 小时前
前端登录token到底应该存在哪?LocalStorage、SessionStorage还是Cookie?一篇说透!
前端·javascript