【Tank】1.0 canvas-基础使用

最新推荐文章于 2024-10-02 05:39:15 发布
最新推荐文章于 2024-10-02 05:39:15 发布
阅读量43 收藏
点赞数
文章标签： javascript 开发语言 ecmascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013002228/article/details/130433486
版权
1.0 新建一个项目tank,新建一个文件1.html。
image.png 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>

canvas就是渲染一个画布。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    //获取dom节点
    const el = document.querySelector("#canvas")
    // 得到一个对象
    const app = el.getContext("2d")
    console.log(app)
</script>
</body>
</html>
image.png
操作步骤

1.颜料 线 贴图(图片)

  1. 画
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script>
    //获取dom节点
    const el = document.querySelector("#canvas")
    // 得到一个对象
    const app = el.getContext("2d")
    console.log(app)
    // 1.颜料 线 贴图(图片)
    // 2. 画

    app.fillStyle = "red"
    app.fillRect(0, 0, 300,300)
</script>
</body>
</html>
image.png
TS支撑

为了提供类型提示，这里采用脚手架进行(vite)。

yarn create vite
image.png

vite脚手架可以选择不同语言的模板，这里选用经典的 vanilla。

image.png

安装依赖。

yarn install

修改index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <canvas id="canvas"></canvas>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
image.png 
npm run dev
image.png
canvas

修改src/main.ts

// @ts-ignore
const el: HTMLCanvasElement = document.querySelector<HTMLCanvasElement>("#canvas")

const app = el?.getContext("2d")

// 1.颜料 线 贴图(图片)
// 2. 画
// @ts-ignore
app.fillStyle = "#80e737"
// 画一个矩形
// @ts-ignore
app.fillRect(0, 0, 300, 300)


// @ts-ignore
app.fillStyle = "#16a085"
// 画一个矩形
// @ts-ignore
app.fillRect(el.width / 2 - 50, el.height / 2 - 50, 100, 100)

修改.html

......
    <canvas id="canvas" width="300" height="300"></canvas>
......
image.png

所以，整个使用流程就是：堆颜料，画->堆颜料，画

深入练习
// @ts-ignore
const el: HTMLCanvasElement = document.querySelector<HTMLCanvasElement>("#canvas")

const app = el?.getContext("2d")

// 1.颜料 线 贴图(图片)
// 2. 画
// @ts-ignore
// app.fillStyle = "#80e737"
// // 画一个矩形
// // @ts-ignore
// app.fillRect(0, 0, 300, 300)
//
//
// // @ts-ignore
// app.fillStyle = "#16a085"
// // 画一个矩形
// // @ts-ignore
// app.fillRect(el.width / 2 - 50, el.height / 2 - 50, 100, 100)
// @ts-ignore
app.strokeStyle = "#8e44ad"
//调整线的宽度
// @ts-ignore
app.lineWidth=30
//线条交汇的边角
// @ts-ignore
app.lineJoin='round'
// 画一个矩形线条
// @ts-ignore
app.strokeRect(50,50,200,200)
image.png 
// @ts-ignore
const el: HTMLCanvasElement = document.querySelector<HTMLCanvasElement>("#canvas")

const app = el?.getContext("2d")

// 1.颜料 线 贴图(图片)
// 2. 画
// ******************* 填充矩形 ******************
// @ts-ignore
// app.fillStyle = "#80e737"
// // 画一个矩形
// // @ts-ignore
// app.fillRect(0, 0, 300, 300)
//
//
// // @ts-ignore
// app.fillStyle = "#16a085"
// // 画一个矩形
// // @ts-ignore
// app.fillRect(el.width / 2 - 50, el.height / 2 - 50, 100, 100)
// ******************* 填充矩形 ******************

// ******************* 矩形边 ******************
// @ts-ignore
// app.strokeStyle = "#8e44ad"
// //调整线的宽度
// // @ts-ignore
// app.lineWidth=30
// //线条交汇的边角
// // @ts-ignore
// app.lineJoin='round'
// // 画一个矩形线条
// // @ts-ignore
// app.strokeRect(50,50,200,200)
// ******************* 矩形边 ******************

// ******************* 圆 ******************
// @ts-ignore
app.fillStyle = "#16a085"
// @ts-ignore
app.strokeStyle = "red"
// @ts-ignore
app.lineWidth=20

// @ts-ignore
app.arc(100,100,50,0,2*Math.PI)
// 绘制
// @ts-ignore
app.stroke();
// @ts-ignore
app.fill();
// ******************* 圆 ******************
image.png 
// @ts-ignore
const el: HTMLCanvasElement = document.querySelector<HTMLCanvasElement>("#canvas")

const app = el?.getContext("2d")

// 1.颜料 线 贴图(图片)
// 2. 画
// ******************* 填充矩形 ******************
// @ts-ignore
// app.fillStyle = "#80e737"
// // 画一个矩形
// // @ts-ignore
// app.fillRect(0, 0, 300, 300)
//
//
// // @ts-ignore
// app.fillStyle = "#16a085"
// // 画一个矩形
// // @ts-ignore
// app.fillRect(el.width / 2 - 50, el.height / 2 - 50, 100, 100)
// ******************* 填充矩形 ******************

// ******************* 矩形边 ******************
// @ts-ignore
// app.strokeStyle = "#8e44ad"
// //调整线的宽度
// // @ts-ignore
// app.lineWidth=30
// //线条交汇的边角
// // @ts-ignore
// app.lineJoin='round'
// // 画一个矩形线条
// // @ts-ignore
// app.strokeRect(50,50,200,200)
// ******************* 矩形边 ******************

// ******************* 圆 ******************
// @ts-ignore
// app.fillStyle = "#16a085"
// // @ts-ignore
// app.strokeStyle = "red"
// // @ts-ignore
// app.lineWidth=20
//
// // @ts-ignore
// app.arc(100,100,50,0,2*Math.PI)
// // 绘制
// // @ts-ignore
// app.stroke();
// // @ts-ignore
// app.fill();
// ******************* 圆 ******************

// ******************* 三角形 ******************
// 开始一条路径，或重置当前的路径
// @ts-ignore
app.beginPath()
// 把路径移动到画布中的指定点，不创建线条
// @ts-ignore
app.moveTo(el.width/2,10)
// @ts-ignore
app.lineTo(el.width-10,222)
// @ts-ignore
app.lineTo(10,222)
// 闭合路径，创建从当前点到开始点的路径
// @ts-ignore
app.closePath()

// @ts-ignore
app.strokeStyle = "red"
// @ts-ignore
app.lineWidth=2
// @ts-ignore
app.stroke();
// ******************* 三角形 ******************
image.png
渐变颜色的实现
// @ts-ignore
const el: HTMLCanvasElement = document.querySelector<HTMLCanvasElement>("#canvas")

const app = el?.getContext("2d")

// 1.颜料 线 贴图(图片)
// 2. 画
// ******************* 填充矩形 ******************
// @ts-ignore
// app.fillStyle = "#80e737"
// // 画一个矩形
// // @ts-ignore
// app.fillRect(0, 0, 300, 300)
//
//
// // @ts-ignore
// app.fillStyle = "#16a085"
// // 画一个矩形
// // @ts-ignore
// app.fillRect(el.width / 2 - 50, el.height / 2 - 50, 100, 100)
// ******************* 填充矩形 ******************

// ******************* 矩形边 ******************
// @ts-ignore
// app.strokeStyle = "#8e44ad"
// //调整线的宽度
// // @ts-ignore
// app.lineWidth=30
// //线条交汇的边角
// // @ts-ignore
// app.lineJoin='round'
// // 画一个矩形线条
// // @ts-ignore
// app.strokeRect(50,50,200,200)
// ******************* 矩形边 ******************

// ******************* 圆 ******************
// @ts-ignore
// app.fillStyle = "#16a085"
// // @ts-ignore
// app.strokeStyle = "red"
// // @ts-ignore
// app.lineWidth=20
//
// // @ts-ignore
// app.arc(100,100,50,0,2*Math.PI)
// // 绘制
// // @ts-ignore
// app.stroke();
// // @ts-ignore
// app.fill();
// ******************* 圆 ******************

// ******************* 三角形 ******************
// // 开始一条路径，或重置当前的路径
// // @ts-ignore
// app.beginPath()
// // 把路径移动到画布中的指定点，不创建线条
// // @ts-ignore
// app.moveTo(el.width/2,10)
// // @ts-ignore
// app.lineTo(el.width-10,222)
// // @ts-ignore
// app.lineTo(10,222)
// // 闭合路径，创建从当前点到开始点的路径
// // @ts-ignore
// app.closePath()
//
// // @ts-ignore
// app.strokeStyle = "red"
// // @ts-ignore
// app.lineWidth=2
// // @ts-ignore
// app.stroke();
// ******************* 三角形 ******************

// ******************* 渐变色 ******************
// 创建线性渐变(用在画布内容上)
// @ts-ignore
const gradinet =app.createLinearGradient(0,0,300,300)

gradinet.addColorStop(0,'#16a085')
gradinet.addColorStop(0.5,'#e67e22')
gradinet.addColorStop(1,'#9b59b6')
// @ts-ignore
app.fillStyle=gradinet
// @ts-ignore
app.fillRect(0,0,200,200)
// ******************* 渐变色 ******************
image.png 
......
// ******************* 渐变色 ******************
// 创建线性渐变(用在画布内容上)
// @ts-ignore
const gradinet =app.createLinearGradient(20,20,200,200)

gradinet.addColorStop(0,'#16a085')
gradinet.addColorStop(0.5,'#e67e22')
gradinet.addColorStop(1,'#9b59b6')
// @ts-ignore
// app.fillStyle=gradinet
// // @ts-ignore
// app.fillRect(0,0,200,200)
// @ts-ignore
app.strokeStyle=gradinet
// @ts-ignore
app.lineWidth=20
// @ts-ignore
app.lineJoin='round'
// @ts-ignore
app.strokeRect(20,20,200,200)
// ******************* 渐变色 ******************
......
image.png
文字处理
......
// ******************* 文字处理 ******************
// @ts-ignore
app.fillStyle = "#34495e"
// @ts-ignore
app.fillRect(0, 0, el.width, el.height)
// @ts-ignore
app.font = '20px 思源黑体-HW'
// @ts-ignore
app.fillStyle = 'white'
// 调整文字基线
// @ts-ignore
app.textBaseline='top'
// @ts-ignore
app.fillText("坦克游戏", 50, 0)
// ******************* 文字处理 ******************
......
image.png

也可以弄成线条。

......
// ******************* 文字处理 ******************
// @ts-ignore
app.fillStyle = "#34495e"
// @ts-ignore
app.fillRect(0, 0, el.width, el.height)
// @ts-ignore
app.font = '60px 思源黑体-HW'
// @ts-ignore
app.strokeStyle = 'white'
// 调整文字基线
// @ts-ignore
app.textBaseline='top'
// @ts-ignore
app.strokeText("坦克游戏", 50, 0)
// ******************* 文字处理 ******************
......
image.png

也可以换成渐变效果

......
// ******************* 文字处理 ******************
// @ts-ignore
app.fillStyle = "#34495e"
// @ts-ignore
app.fillRect(0, 0, el.width, el.height)
// // @ts-ignore
// app.font = '20px 思源黑体-HW'
// // @ts-ignore
// app.fillStyle = 'white'
// // 调整文字基线
// // @ts-ignore
// app.textBaseline='top'
// // @ts-ignore
// app.fillText("坦克游戏", 50, 0)

// @ts-ignore
app.font = '60px 思源黑体-HW'
// 创建线性渐变(用在画布内容上)
// @ts-ignore
const gradinet =app.createLinearGradient(20,20,200,200)

gradinet.addColorStop(0,'#16a085')
gradinet.addColorStop(0.5,'#e67e22')
gradinet.addColorStop(1,'#9b59b6')
// @ts-ignore
app.strokeStyle = gradinet
// 调整文字基线
// @ts-ignore
app.textBaseline='top'
// @ts-ignore
app.strokeText("坦克游戏", 50, 0)
// ******************* 文字处理 ******************
......
image.png
贴图

准备图片images/p2.jpeg

p2.jpeg 
......

// ******************* 贴图 ******************
const img=document.createElement('img')
img.src='../images/p2.jpeg'
img.onload=()=>{
    //将图片放入body中
    document.body.insertAdjacentElement('afterbegin',img)
}
// ******************* 贴图 ******************
......
image.png 
......
// ******************* 贴图 ******************
const img = document.createElement('img')
img.src = '../images/p2.jpeg'
img.onload = () => {
    //将图片放入body中
    // document.body.insertAdjacentElement('afterbegin',img)
    // @ts-ignore
    const pattren = app.createPattern(img, 'repeat')!
    // @ts-ignore
    app.fillStyle=pattren
    // @ts-ignore
    app.fillRect(0,0,300,300)
}
// ******************* 贴图 ******************
......
image.png
图片绘制
......
// ******************* 绘制图片 ******************
app.fillStyle="#000"
// @ts-ignore
app.fillRect(0,0,el.width,el.height)
const img = document.createElement('img')
img.src = '../images/p2.jpeg'
img.onload = () => {
    // @ts-ignore
    app.drawImage(img, 0, 50,100,100)
}
// ******************* 绘制图片 ******************
......
image.png

实现随着画布等比例缩放

......
// ******************* 绘制图片 ******************
app.fillStyle = "#000"
// @ts-ignore
app.fillRect(0, 0, el.width, el.height)
const img = document.createElement('img')
img.src = '../images/p2.jpeg'
img.onload = () => {
    // @ts-ignore
    el.width =  img.naturalWidth * scale(img, el)
    el.height =  img.naturalHeight * scale(img, el)
    // 保持图片和画布大小一致
    // @ts-ignore
    // app.fillRect(0, 0, el.width, el.height)
    // @ts-ignore
    app.drawImage(img, 0, 0, el.width, el.height)
}

// 实现缩略图效果
const scale = (img: HTMLImageElement, el: HTMLCanvasElement) => {
    // naturalWidth: 原始图片的尺寸
    // 返回缩小比例(宽高的最小值)
    return Math.min(el.width / img.naturalWidth, el.height / img.naturalHeight)
}
// ******************* 绘制图片 ******************
......
image.png
随机填充色块
......
// ******************* 随机填充色块 ******************
app.fillStyle='#000'
// @ts-ignore
app.fillRect(0,0,300,300)

for(let i=0;i<2000;i++){
    // @ts-ignore
    app.fillStyle="#fff"
    // @ts-ignore
    app.fillRect(Math.random()*el.width,Math.random()*el.height,2,2)
}
// ******************* 随机填充色块 ******************
......
image.png

随机填充色块-圆

......
// ******************* 随机填充色块-圆 ******************
// @ts-ignore
app.fillStyle = '#000'
// @ts-ignore
app.fillRect(0, 0, 300, 300)

for (let i = 0; i < 200; i++) {
    // @ts-ignore
    app.beginPath();//每次绘制一个新圆时需要重新绘制，不然会相互影响
    // @ts-ignore
    app.fillStyle = ["#e67e22", "#1abc9c", "#27ae60", "#2980b9", "#8e44ad", "#e74c3c"].sort(() => (Math.floor(Math.random() * 3) ? 1 : -1))[0]
    // 排序
    // @ts-ignore
    app.arc(
        Math.random() * (el.width),
        Math.random() * (el.height),
        10 + Math.random() * 10,//半径
        0,
        2 * Math.PI)
    // @ts-ignore
    app.fill()
}
// ******************* 随机填充色块-圆 ******************
......

调整index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <link rel="icon" type="image/svg+xml" href="favicon.svg"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Vite App</title>
</head>
<body>
<div id="app"></div>
<canvas id="canvas" width="300" height="300"  style="overflow: hidden;width: 300px;height: 300px"></canvas>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
image.png
我睡醒刚刚
关注
canvas教程14-资源管理器
William_fang的博客
07-31 344
文章目录一.资源管理器二.源码三.效果图篇章 一.资源管理器 资源管理器：在开发游戏的时候，静态资源是需要请求回来的。 如果游戏直接开始（静态资源没有被请求回来），那么网页可能会报错、空白等现象。 例如，游戏背景图如果没有被请求过来，那么游戏的背景就会出现空白现象。 资源管理器：当游戏资源全部加载完，再开始游戏。 我们目前利用canvas，在渲染过程中对图片进行资源加载。 var allAmount = Object.keys(this.R); 此时会返回一个数组，它是所有key的集合。 获取对象中
【Tank】2.0 canvas-画布实现
我睡醒刚刚
05-09 87
文件结构 image.png index.html如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <link rel="icon" type="image/svg+xml" href="favicon.svg"/> &l...
【Unity3D】Tank大战
little_fat_sheep
08-03 5145
1）人机交互 玩家通过 ↑↓←→ 键（或 W、S、A、D）键控制己方坦克平移； 玩家通过滑动鼠标右键控制己方坦克左右旋转； 玩家通过鼠标左键（或空格键）控制己方坦克发射炮弹； 玩家通过 ESC 键控制窗口全屏和恢复； 玩家通过 Q 键控制退出游戏； 2）相机 主相机跟随：主相机始终在玩家后上方的位置，并保持与玩家的相对位置不变； 次相机实现小地图：次相机俯拍战场，并将影像在右上角显示； 单击小地图，小地图全屏，再单击，小地图恢复，在全屏和恢复的过程中实现动效。 ...............
使用H5 canvas画一个坦克
weixin_34211761的博客
12-25 132
　 具体步骤如下： 　　1. 首先做出绘图区，作为坦克的战场 <canvas id="floor" width="800px" height="500px"></canvas> 　　我们给一个黑色的背景色，并且让它居中（如果对居中的各种奇淫技巧感兴趣，欢迎访问我的第一篇博客——“CSS垂直居中的11种实现方式”，点击这里进行传送 ht...
【java】swing利用canvas绘制实时自适应窗口变化的甘特图
XYZ
08-04 2478
之前用Matlab写过一个绘制甘特图的例子，现在想用java再实现以下，其实原理很简单，就是canvas API的一些基本使用。 利用java swing中的Canvas画图工具画的一个甘特图实例，可以自适应窗口的变化而变化。下面给出代码： package com.canvas.plot; import java.awt.Canvas; import java.awt.Color; ...
在浏览器上画图（canvas的基本用法）
Tank_in_the_street的博客
10-05 3830
在HTML5里，我们可以通过canvas标签来在浏览器里进行画图，但是这个标签并不是能画图的，画图还是要通过JavaScript，这个标签只是一个载体。在canvas这个标签里，默认的width是300,、height是150，想要设置canvas的长宽的话需要在canvas的width属性和height属性那里设置，这个width和height不属于style里的，搞清楚这一点很重要，所以当你在
【带着canvas去流浪（15）】threejs fundamentals翻译系列1-scene graph
华为云官方博客
05-27 2458
示例代码托管在：http://www.github.com/dashnowords/blogs 博客园地址：《大史住在大前端》原创博文目录 华为云社区地址：【你要的前端打怪升级指南】 目录 原文地址：https://threejsfundamentals.org/threejs/lessons/threejs-scenegraph.html 笔者按：别关键词保持原英文单词，理解起来会更方便。原文中有许多内嵌的支持在线编辑的示例代码，可点击上面链接直接体验。 本文是three.js系列博..
android安卓源码海量项目合集打包-1
热门推荐
chenhao0568的专栏
06-11 13万+
下载地址 最后更新共计113个分类5177套源码29.2 GB。 卷 新加卷 的文件夹 PATH 列表 卷序列号为 00000200 5E7A:7F30 F:. ├─前台界面 │ ├─3D标签云卡片热门 │ │ Android TagCloudView云标签的灵活运用.rar │ │ Android 实现 标签 拖动 改变位置.rar │ │ android 流式布局和热门标签.zip │ │ ...
luaframwork的使用
qq_42270065的博客
11-16 550
本文转载自 ：碧俐千仞的博客http://blog.sina.com.cn/peiyul 1、安装框架 只要在http://www.ulua.org/index.html下载LuaFramework，然后用Unity3D打开，这里用的是LuaFramework_UGUI-1.0.4.109版本以及Unity3D 5.2，其他版本理应相似。打开之后需要点击lua菜单里面的Generate All...
（5.x）坦克RPG项目unity源码.rar
10-29
Battle Tank Starter Kit 1.0.unitypackage很可能是一个基础的坦克游戏模板，包含了坦克的基本模型、动画、物理系统和基本的控制逻辑。在Unity中，.unitypackage是资源打包文件，可以方便地导入和导出项目中的资源，...
ym——android源码大放送（实战开发必备）
陈宇明
08-10 4万+
文件夹 PATH 列表 卷序列号为 000A-8F50 E:. │  javaapk.com文件列表生成工具.bat │  使用说明.txt │  免费下载更多源码.url │  目录列表.txt │   ├─android web应用 │      jqmDemo_static.zip │      jqmMobileDemo-master.zip │      jqmMo
jQuery教程10-轮播图之淡入与淡出
William_fang的博客
07-23 511
文章目录一.轮播图的功能分析二.源码三.效果图篇章 一.轮播图的功能分析 1.左侧、右侧按钮需要绑定单机事件。 2.利用特效函数。【当前显示的图片淡出之后，下一张图渐渐地淡入】 二.源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &lt
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 837
Vue 2 中使用 Vue I18n 插件实现中英文切换
JavaScript ArrayBuffer的读写与类型转换
白瑕 的博客
10-01 403
所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 564
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
如何使用Redisson的布隆过滤器？
最新发布
付聪
10-02 303
【代码】如何使用Redisson的布隆过滤器？
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1158
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
深入理解 Nuxt.js 中的 app:data:refresh 钩子
09-29 1308
钩子在数据被刷新时触发，可以选择性地传入要刷新的键名（keys）。这为开发者提供了一个灵活的机制来响应数据变化，并进行必要的更新。Nuxt.js 中的钩子的用途及其实现方法。这个钩子为开发者提供了一种灵活的方式来处理数据的更新，从而优化应用的响应性和用户体验。
vue使用canvas-editor
03-09
Vue使用Canvas-Editor是一个基于Vue框架的Canvas编辑器组件，它可以帮助你在网页中创建和编辑Canvas图形。通过Canvas-Editor，你可以轻松地添加、移动、缩放和旋转图形，以及设置图形的样式和属性。 Canvas-Editor...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值