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

  • 浅谈影响网站权重因素及怎样增加网站权重(浅谈影响网站权重的因素)

    浅谈影响网站权重因素及怎样增加网站权重(浅谈影响网站权重的因素)

  • vivox70pro+怎么更换主题(vivox70pro怎么更改桌面图标样式)

    vivox70pro+怎么更换主题(vivox70pro怎么更改桌面图标样式)

  • 只知道微信名可以加好友吗(只知道微信名可以起诉吗)

    只知道微信名可以加好友吗(只知道微信名可以起诉吗)

  • opporeno4支持无线充电功能吗(opporeno4可不可以无线充电)

    opporeno4支持无线充电功能吗(opporeno4可不可以无线充电)

  • 群主退出了群会解散吗(群主退出群会不会解)

    群主退出了群会解散吗(群主退出群会不会解)

  • 微信怎样不显示正在输入(微信怎样不显示微信号)

    微信怎样不显示正在输入(微信怎样不显示微信号)

  • 华为p40多少赫兹(华为p40多少hz)

    华为p40多少赫兹(华为p40多少hz)

  • 打印机成像装置不足(打印机成像装置是什么)

    打印机成像装置不足(打印机成像装置是什么)

  • 回收站占内存吗(百度网盘回收站占内存吗)

    回收站占内存吗(百度网盘回收站占内存吗)

  • 手机不插卡能连wifi吗(手机不插卡能连wifi吗但不知道密码,怎么连)

    手机不插卡能连wifi吗(手机不插卡能连wifi吗但不知道密码,怎么连)

  • 群主能删除别人发错的信息吗(群主能删除别人发的图片吗)

    群主能删除别人发错的信息吗(群主能删除别人发的图片吗)

  • sugar手机是什么牌(sugar手机质量怎么样)

    sugar手机是什么牌(sugar手机质量怎么样)

  • 为什么库乐队没有共享(为什么库乐队没有30秒一天显示)

    为什么库乐队没有共享(为什么库乐队没有30秒一天显示)

  • vivox9恢复出厂设置密码忘记了怎么办(vivox9恢复出厂设置后还能恢复数据吗)

    vivox9恢复出厂设置密码忘记了怎么办(vivox9恢复出厂设置后还能恢复数据吗)

  • 12306怎么显示身份证号码(12306怎么显示完整的身份证号码)

    12306怎么显示身份证号码(12306怎么显示完整的身份证号码)

  • 抖音怎么上传视频(抖音怎么上传视频不被压缩画质)

    抖音怎么上传视频(抖音怎么上传视频不被压缩画质)

  • 双十一活动是多少天(双十一活动多少淘气值)

    双十一活动是多少天(双十一活动多少淘气值)

  • 苹果手机发信息怎么切换号码(苹果手机发信息发不出去)

    苹果手机发信息怎么切换号码(苹果手机发信息发不出去)

  • 美图秀秀贴纸怎么搜索(美图秀秀贴纸怎么用)

    美图秀秀贴纸怎么搜索(美图秀秀贴纸怎么用)

  • word怎么取消密封线(word2019怎么取消密码)

    word怎么取消密封线(word2019怎么取消密码)

  • airpods苹果6s能用吗(iphone6s airpods能用吗)

    airpods苹果6s能用吗(iphone6s airpods能用吗)

  • 美团红包商家承担吗(美团外卖红包商家承担美团承担)

    美团红包商家承担吗(美团外卖红包商家承担美团承担)

  • 选择性粘贴怎么不能用(选择性粘贴怎么设置固定格式)

    选择性粘贴怎么不能用(选择性粘贴怎么设置固定格式)

  • 7p电池容量多少毫安(7p的电池)

    7p电池容量多少毫安(7p的电池)

  • 相互保可以保几种大病(相互保的期限是多久)

    相互保可以保几种大病(相互保的期限是多久)

  • 接电话黑屏在哪里设置(接电话黑屏在哪里设置华为)

    接电话黑屏在哪里设置(接电话黑屏在哪里设置华为)

  • 小刺猬 (© lorenzo104/Getty Images)

    小刺猬 (© lorenzo104/Getty Images)

  • 在vue3+ts项目里使用query和params传参(vue3加ts)

    在vue3+ts项目里使用query和params传参(vue3加ts)

  • python继承的两点好处(python的继承用法)

    python继承的两点好处(python的继承用法)

  • 个体工商户可以开发票吗
  • 小产权二手房买卖注意些什么
  • 今年补交上年的对外捐赠(视同销售收入)的税怎么处理?
  • 企业所有者权益科目有哪些
  • 火车票进项抵扣怎么勾选
  • 合并报表营业收入怎么算出来的
  • 不动产服务具体有哪些
  • 小规模纳税人增值税优惠政策
  • 远期汇票分为哪几种
  • 专利技术评估价值入股价偏高说明什么
  • 企业的季度所得税怎么算
  • 开错的红字发票申请单上传了怎么撤销?
  • 来料加工企业的会计处理问题
  • 旅游公司发票企业能报销吗
  • 有关增值税期末留抵税额的会计分录
  • 企业不能抵扣的专票有哪些
  • 买卖投资证券基金怎么进行财税处理?
  • 详解非税收入
  • 伙食费没有发票可以税前扣除吗
  • 房地产所得税税负率计算公式
  • 税后2.5万工资税前多少钱
  • 电子普票开具的最新文件
  • 房地产企业预缴增值税如何申报
  • 事业单位采购管理办法
  • 商贸企业小规模转一般纳税人条件
  • php设计模型
  • hook execution failed
  • php和mysql的联合使用
  • 房产税应计入哪个会计科目
  • 在沙滩上的语句
  • php 图片水印
  • 公司账户转私账违法吗
  • 现金销售商品的会计分录
  • 合伙企业与公司一样具有高度的人合性
  • 增值税专用发票电子版
  • 视同销售到底如何纳税调整?
  • 学电脑网站
  • dubbo dubbox
  • 电子税务局没有税务数字账户怎么办
  • 进料加工保税是什么意思
  • 成本和费用有着根本的区别
  • 即征即退 条件
  • sqlserver 自定义函数 读取数据表
  • 承租人收到融资租赁款
  • 小规模开票的税点是多少
  • 供应商来货怎么做会计分类
  • 公司从个人手中购买设备
  • 长期待摊费用的概念
  • 减免的残保金怎么做分录
  • 研发支出的会计处理原则
  • 登记账簿遇到的问题及解决
  • 物业公司代收代缴水电费
  • 建筑企业总公司施工可否由分公司开发票
  • 在你登陆时发生了问题
  • 外账会计做什么
  • mysql解压版安装教程5.7.20
  • 用union怎么把结果加起来
  • mysql输入中文显示乱码
  • windows历代版本一览
  • win9系统
  • windows10预装
  • debian7安装教程
  • win32api.exe - win32api是什么进程
  • dos查看进程占用cpu
  • windows8连wifi
  • linux集群的作用和意义
  • centos libcrypto.so.1.0.0
  • win8.1系统怎么样
  • cocos2d rpg
  • 如何搭建环境变量
  • python爬虫全套教程
  • 设计模式具有的优点
  • linux shell 技巧
  • javascript 对象
  • javascript原型
  • jquery知识点总结
  • 北京朝阳区地税服务大厅
  • 河南地税税率怎么计算
  • 最常见的财税知识
  • 地税是什么时候开始征收耕地的呢
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设