vue3使用canvas的详细指南

2024-05-11 14:00:02

canvas是什么？

一个html5支持的新标签，见名知意，canvas就是画板的意思，可以在canvas上画画。css画三角形很简单，但是要画五角星呢，不妨试试canvas。

在html中使用canvas

1、canvas是html5中的一个标签。

新建一个html。并在body中加入canvas标签。

<body>
    <canvas height="600" width="600"></canvas>
</body>

此时canvas已经显示在画板中，只不过因为和body的颜色一样，所以看不出来。

在head中加入css样式。

<style>
    canvas {
        border:1px solid;
    }
</style>

这时我们就可以看到canvas了。

2、获取CanvasRenderingContext2D对象用于绘图。

先给canvas一个id属性，

<canvas id='canvas' height="600" width="600"></canvas>

获取。

<script>
  const ctx=document.querySelector('#canvas').getContext('2d');
</script>

注意，script标签应该在body标签后（至少在canvas标签后），只有在canvas渲染后才能通过JavaScript代码获取到canvas中的CanvasRenderingContext2D对象。

<body>
    <canvas height="600" width="600"></canvas>
</body>
<script>
  const ctx=document.querySelector('.canvas').getContext('2d');
</script>

3、使用JavaScript代码进行绘画。

<script>
  const ctx=document.querySelector('#canvas').getContext('2d');
  ctx.moveTo(100,100);
  ctx.lineTo(100,400);
  ctx.stroke();
</script>

该代码绘制了一条直线。

关于CanvasRenderingContext2D对象更多的绘制方法请参考官方文档。至少现在我们知道canvas是如何使用的了。（一定要注意要在渲染完成后才能通过JavaScript代码获取CanvasRenderingContext2D对象）

在vue3中使用canvas

1、创建vite+vue3项目并运行。

npm init vue@latest

2、创建我们的canvas。

这是我们的App.vue文件

<script setup>

</script>

<template>

</template>

<style scoped>

</style>

创建我们的canvas

<script setup>

</script>

<template>
  <canvas height="600" width="600"></canvas>
</template>

<style scoped>
canvas {
  border: 1px solid;
}
</style>

3、获取CanvasRenderingContext2D对象并绘制直线。

给canvas标签添加一个ref属性

<canvas ref='canvas' height="600" width="600"></canvas>

获取canvas对象

<script setup>
import {ref} from 'vue'
const canvas = ref();
</script>

渲染完成后获取CanvasRenderingContext2D对象

<script setup>
import { onMounted, ref } from 'vue'

const canvas = ref();

onMounted(() => {
  const ctx = canvas.value.getContext('2d');
})

</script>

画一条直线

<script setup>
import { onMounted, ref } from 'vue'

const canvas = ref();

onMounted(() => {
  const ctx = canvas.value.getContext('2d');
  ctx.moveTo(100, 100);
  ctx.lineTo(100, 400);
  ctx.stroke();
})

</script>

4、模板

<script setup>
import { onMounted, ref } from 'vue'

const canvas = ref();
let ctx = ref();

const drawLine = () => {
  ctx.moveTo(100, 100);
  ctx.lineTo(100, 400);
  ctx.stroke();
}

const initContext = () => {
  ctx = canvas.value.getContext('2d');
}

onMounted(() => {
  initContext();
  drawLine();
})

</script>

<template>
  <canvas ref='canvas' height="600" width="600"></canvas>
</template>

<style scoped>
canvas {
  border: 1px solid;
}
</style>

canvas快速入门

绘制折线

一个moveTo配合多个lineTo。可以通过lineWidth设置线宽，还可以设置两个端点和转折处的形状（使用lineCap和lineJoin）

// 使用moveTo,lineTo,lineWidth,lineCap,lineJoin
const drawCurvedLine = () => {
  ctx.moveTo(100, 100);
  ctx.lineTo(400, 100);
  ctx.lineTo(100, 400);
  ctx.lineTo(400, 400);
  ctx.lineCap = 'round';
  ctx.lineJoin = 'round';
  ctx.stroke();
}

绘制矩形

rect方法以及strokeRect和fillRect。效果等效：strokeRect=rect+stroke，fillRect=rect+stroke。

绘制方式：绘制边框，使用stroke，绘制填充，使用fill。strokeStyle可以设置边框颜色，fillStyle可以设置填充颜色。

// 使用rect,srokeStyle,stroke,fillStyle,fill
const drawStrokeRect = () => {
  ctx.rect(100, 100, 100, 100);
  ctx.strokeStyle = 'green';
  ctx.stroke();
}

const drawFillRect = () => {
  ctx.rect(300, 100, 100, 100);
  ctx.fillStyle = 'blue';
  ctx.fill();
}

将绘制一个绿色边框的矩形和蓝色的矩形。然而，当一同调用时，会发现变成了两个一模一样的矩形（绿色边框或者蓝色填充）。

属性作用域：解决上述问题，使用beginPath方法即可。beginPath将后面对于属性的设置隔离开来，以避免覆盖前面的属性。

// 这里还尝试了使用strokeRect和fillRect替代了rect、stroke、fill
const drawStrokeRect = () => {
    ctx.beginPath();
    ctx.strokeStyle='green';
    ctx.strokeRect(100,100,100,100);
}

const drawFillRect = () => {
  ctx.beginPath();
  ctx.fillStyle = 'blue';
  ctx.fillRect(300, 100, 100, 100);
}

绘制弧线

圆圈

ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();

圆弧

ctx.beginPath();
ctx.arc(100,75,50,90/180*Math.PI,2*Math.PI);
ctx.stroke();

扇形

ctx.beginPath();
ctx.moveTo(100,75);
ctx.arc(100,75,50,90/180*Math.PI,2*Math.PI);
ctx.closePath();
ctx.fill();

圆环

  const RINGWIDTH = 10;

  ctx.beginPath();
  ctx.arc(100, 75, 90, 0, 2 * Math.PI);
  ctx.fill();
  ctx.beginPath();
  ctx.arc(100, 75, 90-2*RINGWIDTH, 0, 2 * Math.PI);
  ctx.fillStyle = 'white';
  ctx.fill();

补充：

如你所见，绘制扇形时使用了closePath，意思是将所有端点连接起来（一般是将终点和起点连接起来，形成一个闭合图形。只有图形闭合时，fill才能生效）。
所有函数的参数不需要单位。（设置字体时，ctx.font=‘40px’，需要带单位，但确实不是函数的参数）
需要角度作为参数时，都是以弧度的形式提供。计算公式，弧度=角度*Math.PI/180。90度，记为90*Math.PI/180。
更多关于画布的使用，可以查看HTML Canvas 参考手册 (w3school.com.cn)

总结

到此这篇关于vue3使用canvas的文章就介绍到这了,更多相关vue3使用canvas内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vue3+Canvas实现坦克大战游戏(二)

目录前言敌方坦克的生成坦克移动的算法子弹击中物体的算法爆炸效果的实现生成障碍物(石墙.砖墙等) 总结前言接着上篇讲,本篇主要给大家讲解一下子弹击中物体.物体销毁.敌方坦克构建生成.运动算法.爆炸效果.以及障碍物的生成:了解了这些我相信你可以不依赖游戏引擎实现大部分小游戏的开发. Es5版本: 在线游戏源代码 W/上 S/下 A/左 D/右 F/射击让我们开始吧! 敌方坦克的生成我们可以使用 for 循环和Tank 构造函数,批量制造多个敌方坦克,x,y 为其在画布中的坐标,
Vue3+Canvas实现简易的贪吃蛇游戏

目录前言规则思路流程图代码实现技术栈基本变量定义初始化食物绘制蛇头/蛇身绘制碰撞算法.边界条件积分计算.暂停,继续等功能后记前言贪吃蛇作为一个经典的小游戏,是很多人儿时的记忆,当时的掌机.诺基亚手机里面都有它的身影,随着时间流逝,当年的我们已经变成大人模样,玩着王者,吃鸡等大型游戏:贪吃蛇这种小游戏已经吊不起我们的兴趣了,不过如果你是一名程序员,那还是建议实现一下,毕竟作为 leetcode 353 算法题你总不想在面试的时候遇到它却不会吧. 本文让我们来复刻一下这
vue3如何将html元素变成canvas(海报生成),进行图片保存/截图

目录将html元素变成canvas(海报生成),进行图片保存/截图使用html2canvas将页面转化为图片将html元素变成canvas(海报生成),进行图片保存/截图 // 网页上只有一张图片我们可以直接就进行图片保存 // 但是你想保存这张图片的时候顺便把下面的字也带上相当于截图那请你像我这样做 <div id="capture" style="padding: 10px; background: #fff"> <img :s
Vue3+Canvas实现坦克大战游戏

目录前言架构搭建 Canvas构造函数画布绘制文本渲染画布重绘前的clear 核心:绘制函数 BattleCity构造函数实现坦克的移动坦克发射子弹的逻辑总结前言记得几年前刚做前端开发的时候,跟着师傅用纯 es5 实现了这款坦克大战,可以说我入行前端是从 javaScript 小游戏开始的,时间已匆匆过去了数年,前端发展日新月异,各种新框架.新概念层出不穷,很容易就迷失在对各种新技术的盲目学习和应用中,真正的编程是什么呢?值得思考的问题. 我准备用 vue3 重新实现一下这款
vue3使用canvas的详细指南

目录 canvas是什么? 在html中使用canvas 1.canvas是html5中的一个标签. 2.获取CanvasRenderingContext2D对象用于绘图. 3.使用JavaScript代码进行绘画. 在vue3中使用canvas 1.创建vite+vue3项目并运行. 2.创建我们的canvas. 3.获取CanvasRenderingContext2D对象并绘制直线. 4.模板 canvas快速入门绘制折线绘制矩形绘制弧线总结 canvas是什么? 一个html5支持
浅谈vue中使用图片懒加载vue-lazyload插件详细指南

在vue中使用图片懒加载详细指南,分享给大家.具体如下: 说明当网络请求比较慢的时候,提前给这张图片添加一个像素比较低的占位图片,不至于堆叠在一块,或显示大片空白,让用户体验更好一点. 使用方式使用vue的 vue-lazyload 插件插件地址:https://www.npmjs.com/package/vue-lazyload 案例 demo: 懒加载案例demo Installation 安装方式 npm $ npm i vue-lazyload -D CDN CDN: https:
vue3引入Element-plus的详细步骤记录

目录 vue3引入Element-plus的详细步骤附:vue3 element plus按需引入最优雅的用法总结 vue3引入Element-plus的详细步骤前提是安装好了npm 以及创建好了vue脚手架 1.打开控制台到到你所在的根目录: 2.输入引入指令: npm install element-plus --save 3.等待安装好后,在脚手文件中打package.json查看是否安装好看到有 "element-plus": "^2.1.5"就是安
Vercel+MongoDB Atlas部署详细指南

目录用Vercel和MongoDB Atlas进行部署 Web应用程序部署到Vercel Vercel-MongoDB 应用程序的开发和生产架构 SvelteKit 演示应用程序清单1.SvelteKit的load()方法清单2.从后端取回apothegms 清单3.MongoDB帮助器/lib/mongo.js 清单4.添加到.env和.gitignore中 Vercel-MongoDB的生产设置将项目导入Vercel 创建一个MongoDB Atlas集群回到Vercel来添加集成
PHP中的运算符使用示例详细指南

目录正文逻辑运算符对布尔值起作用 not运算符: 2个单数运算符正文一旦你有了一些变量,你就可以对它们进行运算: $base = 20; $height = 10; $area = $base * $height; 我用来将base与height相乘的* ,就是乘法运算. 我们有相当多的运算符,让我们对主要的运算符做一个简单的总结. 首先,这里是算术运算符.+,-,*,/ (除法),% (余数)和** (指数). 我们有赋值运算符= ,我们已经用它来给一个变量赋值了. 接下来我们有比较运
Vue3的vue-router超详细使用示例教程

目录搭建vue3环境 vue-router入门(宝宝模式) vue-router基础(青年模式) 一.动态路由匹配 1.带参数的动态路由匹配 2.捕获所有路由或404 Not Found路由二.嵌套路由三.编程式导航 1.router.push()方法的使用 2.router.replace()方法的使用 3.router.go()方法的使用搭建vue3环境我们使用vite来搭建vue3环境(没有安装vite需要去安装vite) npm create vite routerStudy
Vue3中Vuex的详细使用方法

目录 Vuex是做什么的? 状态管理是什么? 单页面的状态管理 vuex(Vue3.2版本) 多页状态管理 vuex store对象属性介绍 Vue3中获取 store 实例对象的方法 1. state 2. mutations 3. actions 4. getters 5. modules 总结 Vuex是做什么的? Vue官方:状态管理工具状态管理是什么? 需要在多个组件中共享的状态.且是响应式的.一个变,全都改变. 例如一些全局要用的的状态信息:用户登录状态.用户名称.地理位置信息.购
Android App支付系列（二）：支付宝SDK接入详细指南(附官方支付demo)

一家移动互联网公司,说到底,要盈利总是需要付费用户的,自己开发支付系统对于资源有限的公司来说显然不太明智,国内已经有多家成熟的移动支付提供商,阿里就是其中之一. 笔者在此总结了下阿里旗下支付宝Android SDK支付的接入流程,供后来者参考. 接入流程如下: 1 签约成为支付宝商户签约地址:https://b.alipay.com/, 只有成为签约商户的开发者才能具备集成支付宝app支付的资格. 签约资料:1)营业执照 2)APP说明文档 3)商户经营信息.商户联系人等信息必要时还需提供A
Android App支付系列（一）：微信支付接入详细指南(附官方支付demo)

写在前面一家移动互联网公司,说到底,要盈利总是需要付费用户的,自己开发支付系统显然是不明智的,国内已经有多家成熟的移动支付提供商,腾讯就是其中之一.梳理了下微信支付的接入,今天给大家分享下腾讯旗下的微信支付SDK的接入流程. 接入流程 1.申请开发者资质地址:https://open.weixin.qq.com/ 使用公司管理者/高层帐号登录微信开放平台,进入"账号中心",进行开发者资质认证,需要填写公司资料,包括但不限于,公司注册号,公司营业执照,公司对外办公电话,公司对公银行卡
vue2 vue3中使用Echarts详细

目录 1.安装 2.vue2中使用Echarts 在main.js文件中给定一个容器 3.vue3中使用Echarts 在根组件里引入echart,一般是App.vue 在需要使用的页面,定义div 然后在需要使用到Echarts的页面inject 1.安装 npm install echarts --save 2.vue2中使用Echarts 在main.js文件中 // 引入echarts import echarts from 'echarts' Vue.prototype.$echar