位置: IT常识 - 正文

【vue3】使用canvas(vue 如何使用)

编辑:rootadmin
【vue3】使用canvas canvas是什么?

推荐整理分享【vue3】使用canvas(vue 如何使用),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue中使用canvas,vue3使用教程,vue 如何使用,vue3使用教程,vue中如何使用canvas,vue3怎么用,vue中如何使用canvas,vue3 canvas,内容如对您有帮助,希望把文章链接给更多的朋友!

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

在html中使用canvas1、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中使用canvas1、创建vite+vue3项目并运行。npm init vue@latest

2、创建我们的canvas。【vue3】使用canvas(vue 如何使用)

这是我们的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,lineJoinconst 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,fillconst 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、fillconst 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)
本文链接地址:https://www.jiuchutong.com/zhishi/298541.html 转载请保留说明!

上一篇:openai.error.AuthenticationError: No API key provided.

下一篇:HTML+CSS+JS 学习笔记(三)———Javascript(中)(html+css+javascript编程入门指南)

  • 怎样恢复快手查找功能(快手恢复记录)

    怎样恢复快手查找功能(快手恢复记录)

  • 淘宝卖家手机版是什么软件(淘宝卖家手机版怎么拒绝退款申请呢)

    淘宝卖家手机版是什么软件(淘宝卖家手机版怎么拒绝退款申请呢)

  • 抖音企业号怎么取消认证(抖音企业号怎么挂小黄车商品)

    抖音企业号怎么取消认证(抖音企业号怎么挂小黄车商品)

  • 手机管家有必要装吗(手机管家有必要下载吗)

    手机管家有必要装吗(手机管家有必要下载吗)

  • ipad和平板的区别(ipad 和平板什么区别)

    ipad和平板的区别(ipad 和平板什么区别)

  • 苹果手机突然无服务了怎么解决(苹果手机突然无法充电)

    苹果手机突然无服务了怎么解决(苹果手机突然无法充电)

  • 单电源和双电源是指什么(单电源和双电源哪个好)

    单电源和双电源是指什么(单电源和双电源哪个好)

  • 手机直播有电流声怎么办(手机直播有电流声怎么解决视频)

    手机直播有电流声怎么办(手机直播有电流声怎么解决视频)

  • 蓝牙双耳机不能一起响(双耳的蓝牙耳机为什么不能一起播放音乐了)

    蓝牙双耳机不能一起响(双耳的蓝牙耳机为什么不能一起播放音乐了)

  • 快手换头像会不会影响上热门(快手换头像不显示)

    快手换头像会不会影响上热门(快手换头像不显示)

  • 微信私密朋友圈别人真的看不见吗(微信私密朋友圈是不是仅自己可见)

    微信私密朋友圈别人真的看不见吗(微信私密朋友圈是不是仅自己可见)

  • hdmi2.0支持4k60帧吗(hdmi2.0 支持4k 60hz 10bit吗)

    hdmi2.0支持4k60帧吗(hdmi2.0 支持4k 60hz 10bit吗)

  • 苹果se和5s有什么区别(苹果se和5s哪个好)

    苹果se和5s有什么区别(苹果se和5s哪个好)

  • 小米6x支持9v2a快充吗(小米6x参数支持快充么)

    小米6x支持9v2a快充吗(小米6x参数支持快充么)

  • 域名系统定义(域名系统定义怎么设置)

    域名系统定义(域名系统定义怎么设置)

  • vivo怎么调返回键(vivo怎么调返回主页面的)

    vivo怎么调返回键(vivo怎么调返回主页面的)

  • 华为mate30pro怎么看屏幕厂家(华为mate30pro怎么升级鸿蒙系统)

    华为mate30pro怎么看屏幕厂家(华为mate30pro怎么升级鸿蒙系统)

  • 浏览器收藏夹丢失怎么办(浏览器收藏夹不小心删除了怎么找回?)

    浏览器收藏夹丢失怎么办(浏览器收藏夹不小心删除了怎么找回?)

  • 电脑全选是ctrl加什么(全选的电脑快捷键是什么)

    电脑全选是ctrl加什么(全选的电脑快捷键是什么)

  • 苹果手机电池显示维修怎么回事(苹果手机电池显示服务)

    苹果手机电池显示维修怎么回事(苹果手机电池显示服务)

  • 美团怎么看消费总额(美团怎么看消费总共花了多少钱)

    美团怎么看消费总额(美团怎么看消费总共花了多少钱)

  • 华为手环3e功能介绍(华为手环3e功能详解)

    华为手环3e功能介绍(华为手环3e功能详解)

  • Qt--无边框窗口完美(FrameLess)实现,包含缩放和移动功能重写。(qt无边框窗口设计)

    Qt--无边框窗口完美(FrameLess)实现,包含缩放和移动功能重写。(qt无边框窗口设计)

  • 减资需要的资料
  • 车辆购置税如何计算
  • 供热管道属于什么经营范围内
  • 个人出租住房要交个税吗
  • 水果店个体户怎么交税 广州
  • 小规模纳税人申报时间
  • 个税累计扣除项目合计2712.5是什么
  • 邮局可以开发票吗 税点多少
  • 土地增值税和房产税
  • 虚报亏损的税务处理办法
  • 企业购买硬件与软件该如何做账?
  • 通用机打发票现在还有吗
  • 工会经费用于什么
  • 小规模纳税人出售不动产征收率
  • 村集体收入所得税率多少
  • 自产自销农产品企业所得税
  • 金融业营业税改增值税
  • 国家税务总局11号令
  • 发票增值税是多少个点
  • 资产负债表在途物资属于存货吗
  • 废品残料回收入库
  • 发票过期一年可以用吗
  • 长期应付款账面价值和账面余额
  • 车辆保险车船税每年交多少
  • 工资一定要通过应付工资科目吗
  • 员工吃饭发票的怎么报销
  • 子公司和母公司的财务关系
  • 电脑怎么纯净启动
  • php 抓取别的网站的内容
  • 学php的书
  • 网络看不到局域网图标
  • win7安装包下载
  • 字体文件夹在哪
  • php fopen()
  • 什么是企业最佳融资方式
  • 试用期不交金后面补缴
  • php的用处
  • 未交社保可以要求单位赔偿吗
  • 研发人员工资计入什么科目
  • 帝国cms如何卸载应用
  • sql 临时表格
  • 生产成本明细账t型账
  • 其他债权投资的汇兑差额计入什么科目
  • 进项税大于销项税怎么结转
  • 固定资产计提折旧的原则
  • 出口货款收不回怎么办
  • 商业会计怎么做会计分录
  • 债务重组的方式不包括债务转为资本
  • 非居民企业所得税
  • 民办非企业单位免税
  • 账户利息计入什么科目
  • 没有发票的福利费支出可以税前扣除吗
  • 如何恢复数据库数据
  • 数据库性能优化面试题
  • windowsxpwindows7都是
  • win8开始界面
  • win2003回收站
  • ubuntu系统怎么设置不锁屏
  • 在linux操作系统中,/etc/rc.d/init.d
  • win7旗舰版32位系统激活
  • linux操作系统启动
  • 如何在mac系统和win10之间转换
  • kprcycleaner.exe是什么
  • win10如何将我的电脑添加到桌面
  • mac装win8.1
  • win10蓝屏故障
  • sparsomycin
  • cocos 3.x android下home键后,切回游戏时黑屏太久的问题
  • js经典实例
  • bootstrap要学吗
  • 基于JAVASCRIPT实现的可视化工具是
  • webview清除数据
  • android开发工程师岗位说明
  • 猫的游戏视频
  • 超精准的电压基准芯片
  • python django运行
  • 专项调查法
  • 运输费属于什么会计分录
  • 电子税务局在线咨询
  • 财税[2020]25号
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设