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

  • 华为抬起亮屏怎么设置(华为抬起亮屏怎么设置mate20)

    华为抬起亮屏怎么设置(华为抬起亮屏怎么设置mate20)

  • 荣耀x10一共有几个扬声器(荣耀x10有5g吗)

    荣耀x10一共有几个扬声器(荣耀x10有5g吗)

  • 微信如何引用别人的话回复(微信如何引用别人说的话)

    微信如何引用别人的话回复(微信如何引用别人说的话)

  • 二进制数整数从右数第三位的位权是(二进制的整数)

    二进制数整数从右数第三位的位权是(二进制的整数)

  • opporeno3来电闪光灯怎么设置(opporeno3来电闪光灯怎么打开)

    opporeno3来电闪光灯怎么设置(opporeno3来电闪光灯怎么打开)

  • 看一小时抖音多少流量(一小时抖音多少播放量)

    看一小时抖音多少流量(一小时抖音多少播放量)

  • vivo27手机多大的尺寸(vivox27手机尺寸多宽多长)

    vivo27手机多大的尺寸(vivox27手机尺寸多宽多长)

  • 荣耀9x如何打开nfc(荣耀9x如何打开升降摄像头)

    荣耀9x如何打开nfc(荣耀9x如何打开升降摄像头)

  • 三星S20能否设置90hz(三星s20fe怎么设置)

    三星S20能否设置90hz(三星s20fe怎么设置)

  • 拼多多走步数在哪里找到(拼多多走步数在哪里找)

    拼多多走步数在哪里找到(拼多多走步数在哪里找)

  • 小米手机屏锁忘记密码(小米手机屏幕锁忘了)

    小米手机屏锁忘记密码(小米手机屏幕锁忘了)

  • 手机恢复大师可以恢复删掉的微信聊天记录吗(手机恢复大师可以恢复聊天记录吗)

    手机恢复大师可以恢复删掉的微信聊天记录吗(手机恢复大师可以恢复聊天记录吗)

  • 抖音资料不合法 修改不过来怎么办(抖音上资料不合法什么意思)

    抖音资料不合法 修改不过来怎么办(抖音上资料不合法什么意思)

  • 台式机反应慢怎么解决(台式机反应慢怎么升级)

    台式机反应慢怎么解决(台式机反应慢怎么升级)

  • 华为畅享10指纹解锁在哪(华为畅享10指纹设置)

    华为畅享10指纹解锁在哪(华为畅享10指纹设置)

  • 单播地址怎么判断(单播地址包括哪三类)

    单播地址怎么判断(单播地址包括哪三类)

  • 红米note8pro支持无线快充吗(红米note8pro支持扩展内存吗)

    红米note8pro支持无线快充吗(红米note8pro支持扩展内存吗)

  • 华为p30怎么会闪退(华为p30屏幕一闪一闪的)

    华为p30怎么会闪退(华为p30屏幕一闪一闪的)

  • 小米4手环怎么连接音乐(小米4手环怎么设置自己图片屏幕壁纸?)

    小米4手环怎么连接音乐(小米4手环怎么设置自己图片屏幕壁纸?)

  • 快手黄钻怎么提现快币(快手黄钻怎么提现到微信)

    快手黄钻怎么提现快币(快手黄钻怎么提现到微信)

  • 手机没有震动了怎么回事(手机没有震动了是什么原因vivo)

    手机没有震动了怎么回事(手机没有震动了是什么原因vivo)

  • 苹果7横屏怎么设置(苹果横屏怎么弄)

    苹果7横屏怎么设置(苹果横屏怎么弄)

  • 蓝牙pin或密钥不正确(蓝牙pin或密钥不正确不匹配怎么办)

    蓝牙pin或密钥不正确(蓝牙pin或密钥不正确不匹配怎么办)

  • Fishwife不是“鱼妻子”!真实含义让人颤抖!(frogfish躄鱼)

    Fishwife不是“鱼妻子”!真实含义让人颤抖!(frogfish躄鱼)

  • 查补以前年度税款
  • 耕地占用税的特点与意义
  • 安装服务费增值税专票税率多少
  • 初税亩是什么意思
  • 一般纳税人简易征收的适用范围
  • 分公司企业所得税政策
  • 滴滴出行怎么弄电子发票
  • 个体工商户发票额度
  • 预缴企业所得税怎么做会计分录
  • 利润表中第3栏营业税金及附加等于什么
  • 事业单位经营结余为负数的原因
  • 房屋建筑物评估技术鉴定表
  • 金穗开发票时怎样添加商品?
  • 工资分两次发为什么分两次扣税?
  • 财税[2010]121号中的宗地容积率指的是什么?
  • 企业筹办期多久
  • 研发费用如何界定
  • 个人独资企业所得税缴纳标准
  • 免征文化事业建设费条件的销售额标准
  • 国外发票可以报销吗
  • 专利年费应该入哪个科目
  • win8系统怎么连接无线
  • 制造费用明细科目有哪些
  • bios相关概念
  • 路由器隐藏ssid后果严重
  • php的认识
  • 发生坏账账务处理
  • 微信小程序分成比例
  • vue怎么让按键启用和禁用
  • framework怎么用
  • h5页面跳转小程序不显示按钮
  • vuex iframe
  • 旅行费发票
  • 会计凭证出现的问题
  • phpcms模板下载
  • php防盗链
  • 残保金滞纳金可以税前扣除吗
  • 小企业会计准则调整以前年度费用分录
  • 建账的三个基本步骤
  • 税务发票金额可以增加吗?
  • 房地产企业销售房屋印花税税率
  • 残疾人保障金为负数
  • 建信融通e信通怎样转让
  • 累计摊销的会计分录有哪些
  • 公司注销前的发票怎么查
  • 免费样品的好处
  • 固定资产报废处理中,最终的净损益应作为
  • 本年利润如何记账
  • 自产自销属于商品吗
  • 计提工资申报个税
  • 收到去年所得税退税款会计分录
  • 在长期股权投资中,如何理解控制、重大影响?
  • 原股东将全部股权转让
  • 交易性金融资产公允价值变动计入
  • MySQL的存储过程保存在哪里
  • win8升级win10系统会卡吗
  • xp电脑启动项怎么设置启动项
  • linux系统关闭ftp服务
  • 回收站清空文件怎么恢复?试试这三个方法找回!
  • mac os如何安装软件
  • backupwx.exe
  • win7网络连接无internet简单修复方法
  • windows10窗口设置在哪
  • cocos2d-x教程
  • jquery基本操作
  • jquery 限制文件大小
  • android 滚动选择器
  • 安卓笔记软件squid使用教程
  • Node.js中的包管理工具是什么
  • python中pandas.DataFrame对行与列求和及添加新行与列示例
  • 安卓手机与电脑连接方法
  • windows ipython
  • js有几种模式
  • python列出所有文件名
  • 嵌入式安卓开发入门
  • 现在小规模开专票多少钱
  • 如何查询以前月份发票超限量的申请
  • ca钥匙登陆不了电子税务局
  • 增值税纳税申报表附列资料(一)
  • 划拨土地是否可以出租的法律规定
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设