位置: 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编程入门指南)

  • b站怎么删除自己的投稿(b站怎么删除自己的动态)

    b站怎么删除自己的投稿(b站怎么删除自己的动态)

  • 快手别人送的卡怎么领取(快手别人送的卡怎么提现)

    快手别人送的卡怎么领取(快手别人送的卡怎么提现)

  • 快手直播没有推送几天能恢复(快手直播没有推送)

    快手直播没有推送几天能恢复(快手直播没有推送)

  • 不是微信好友怎么拉进群(不是微信好友怎么删除对方)

    不是微信好友怎么拉进群(不是微信好友怎么删除对方)

  • 广联达备份文件在哪里(广联达备份文件路径修改)

    广联达备份文件在哪里(广联达备份文件路径修改)

  • 为什么探探有两种界面(为什么探探匹配的都是好几个月)

    为什么探探有两种界面(为什么探探匹配的都是好几个月)

  • 换手机了支付宝登录怎么什么记录都没有(换手机了支付宝怎么登录)

    换手机了支付宝登录怎么什么记录都没有(换手机了支付宝怎么登录)

  • 华为mate30保时捷手机上市时间(华为MATE30保时捷参数)

    华为mate30保时捷手机上市时间(华为MATE30保时捷参数)

  • ie8的兼容性视图设置在哪(ie8兼容性视图(v)是灰色)

    ie8的兼容性视图设置在哪(ie8兼容性视图(v)是灰色)

  • 手机杂志不更新怎么办(手机杂志app)

    手机杂志不更新怎么办(手机杂志app)

  • 如何让qq开机不自启(如何让qq开机不跳出来)

    如何让qq开机不自启(如何让qq开机不跳出来)

  • excel表格如何查找图片(excel表格如何查找想要的内容)

    excel表格如何查找图片(excel表格如何查找想要的内容)

  • 台式电脑设怎么格式化(台式电脑怎么弄)

    台式电脑设怎么格式化(台式电脑怎么弄)

  • 为什么闲鱼发布的东西没有浏览量(为什么闲鱼发布没人看)

    为什么闲鱼发布的东西没有浏览量(为什么闲鱼发布没人看)

  • 简述局域网的硬件组成(简述局域网的硬件功能)

    简述局域网的硬件组成(简述局域网的硬件功能)

  • airpods能不能定位(airpods可以定时吗)

    airpods能不能定位(airpods可以定时吗)

  • 来微信没声音咋回事啊(来微信没声音咋调)

    来微信没声音咋回事啊(来微信没声音咋调)

  • no bootable device什么意思

    no bootable device什么意思

  • 芒果tv怎么退出当前账号(芒果TV怎么退出全屏)

    芒果tv怎么退出当前账号(芒果TV怎么退出全屏)

  • 荣耀jsnal00是什么型号(荣耀jsnal00a价格)

    荣耀jsnal00是什么型号(荣耀jsnal00a价格)

  • mate20三个摄像头的作用(mate20三个摄像头分工)

    mate20三个摄像头的作用(mate20三个摄像头分工)

  • 2015年4月4日摄于Tear Drop Arch附近的月全食,犹他州纪念碑谷 (© Alan Dyer/Alamy)

    2015年4月4日摄于Tear Drop Arch附近的月全食,犹他州纪念碑谷 (© Alan Dyer/Alamy)

  • 【前端每日一问002】jquery中each与data方法的用法与概念(前端常问的面试题)

    【前端每日一问002】jquery中each与data方法的用法与概念(前端常问的面试题)

  • 金税盘抵扣增值税申报
  • 用库存现金支付职工医药费用69元会计人员编制的
  • 劳务公司收到劳务费怎么做账
  • 营业收入大于资产总计和主营业务收入之和什么原因
  • 合伙企业借款利息收入个税
  • 企业文化事业建设费计算
  • 因技术原因淘汰的财产形成的损失需备案吗
  • 交易性金融资产的入账价值
  • 股权转让评估费可以有公司承担吗
  • 上年度重复结转会计分录
  • 购入材料用什么科目
  • 进口货物付款计入哪个科目?
  • 冲减预提费用
  • 股东借款可以免增值税吗
  • 注册资本没有到账怎么做账
  • 增值税电子发票怎么开具流程
  • 主营业务税金及附加大概比例
  • 住房公积金管理官网
  • 登记为一般纳税人后可以转为小规模纳税人
  • 设备改造时各项支出的会计处理?
  • 工地买东西怎么记账
  • 建安企业收取管理费虚开怎么处理
  • 电脑屏发黄怎么调正常哪
  • 预收账款与应收账款为什么合并
  • linux怎么设置读写权限
  • PHP:pg_escape_literal()的用法_PostgreSQL函数
  • 年度汇算清缴怎么查询
  • 企业购入固定资产要交印花税吗
  • 应税行为包括销售货物吗
  • 浅谈一下新冠的好处
  • 税控盘和金税盘的功能一样吗
  • php绘制图片
  • 由浅入深英语怎么说
  • php 时间
  • php上传照片
  • 退回的工伤保险会计分录
  • ppp中启用chap命令
  • 交易性金融资产的入账价值
  • 固定资产支出计入什么科目
  • 物业管理可以开保洁发票吗
  • 固定资产多少金额才算
  • 帝国cms模板文件放在哪里
  • 出纳开的收据找不到了怎么办
  • 哪些票据属于会计票据
  • 多交个税收到退回怎么办
  • 增值税专用发票几个点
  • 与其他企业联营
  • 冲销预付账款怎么填记账凭证
  • 企业的收入总额
  • 现金支付的范围包括
  • 分公司有独立账套吗
  • sql2005win10安装教程
  • sql中nullif
  • win8 恢复
  • 拨开层层迷雾是什么歌
  • ntldr文件在哪
  • wmiex.exe是什么程序
  • naimag32.exe - naimag32是什么进程 有什么用
  • linux的批处理
  • win8怎么下载qq
  • win8怎么设置开始
  • win7睡眠唤醒设置密码
  • 您的服务器不支持此服务
  • win7怎样安装adb工具
  • 升级win10系统后无法联网的三种解决方法
  • opengl语言
  • window.open打开窗口设置背景色
  • 如何自动更正
  • JavaScript中setAttribute用法介绍
  • 新版unity
  • centos创建shell脚本
  • unity3ds
  • unity火堆
  • python网络爬虫总结
  • 由简入繁是成语吗
  • python集合的基本操作
  • django框架详解
  • 宁夏电子税务局登录入口
  • 无锡梁溪区在哪
  • 贵州省地方税务局公告2016年第13号
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设