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

  • 苹果如何设置自动开机(苹果如何设置自动关机)

    苹果如何设置自动开机(苹果如何设置自动关机)

  • 万能遥控器怎么配对机顶盒(万能遥控器怎么用视频)

    万能遥控器怎么配对机顶盒(万能遥控器怎么用视频)

  • 微信预加辅助是什么来的(微信预加辅助平台)

    微信预加辅助是什么来的(微信预加辅助平台)

  • 毒无法鉴定是什么意思(毒无法鉴别会退钱吗)

    毒无法鉴定是什么意思(毒无法鉴别会退钱吗)

  • 电脑平车怎么调快速度(电脑平车怎么调倒回针)

    电脑平车怎么调快速度(电脑平车怎么调倒回针)

  • 移动硬盘和u盘相比最大的优势是(移动硬盘和u盘的使用寿命)

    移动硬盘和u盘相比最大的优势是(移动硬盘和u盘的使用寿命)

  • 为啥我发的抖音作品没人点赞(为啥我发的抖音上面显示搜索)

    为啥我发的抖音作品没人点赞(为啥我发的抖音上面显示搜索)

  • 扬声器和麦克风不能一起使用(扬声器和麦克风的原理)

    扬声器和麦克风不能一起使用(扬声器和麦克风的原理)

  • ipad变卡了怎么办(ipad变卡了怎么清理)

    ipad变卡了怎么办(ipad变卡了怎么清理)

  • 抖音访客怎么查询(抖音访客怎么查具体时间)

    抖音访客怎么查询(抖音访客怎么查具体时间)

  • 小米体脂秤一直缺水(小米体脂秤一直显示有重量)

    小米体脂秤一直缺水(小米体脂秤一直显示有重量)

  • 全民k歌的扫一扫在哪里(全民K歌的扫一扫)

    全民k歌的扫一扫在哪里(全民K歌的扫一扫)

  • 手机摔过后有什么影响(手机摔了后会影响性能吗)

    手机摔过后有什么影响(手机摔了后会影响性能吗)

  • 燃气壁挂炉mod什么意思(壁挂炉上的mod)

    燃气壁挂炉mod什么意思(壁挂炉上的mod)

  • 如何下载快手视频到手机(如何下载快手视频不带快手号)

    如何下载快手视频到手机(如何下载快手视频不带快手号)

  • 什么是三段设计(“三段式”结构)

    什么是三段设计(“三段式”结构)

  • 手机4g卡怎么显示2g(手机4g卡怎么显示无服务)

    手机4g卡怎么显示2g(手机4g卡怎么显示无服务)

  • 手机垃圾怎么清理干净(手机垃圾怎么清除干净)

    手机垃圾怎么清理干净(手机垃圾怎么清除干净)

  • iphone11搭载什么基带(苹果11用的是)

    iphone11搭载什么基带(苹果11用的是)

  • 电脑文件怎么发送到qq好友(电脑文件怎么发送到qq邮箱)

    电脑文件怎么发送到qq好友(电脑文件怎么发送到qq邮箱)

  • 苹果隐藏照片怎么恢复(苹果隐藏照片怎么上锁)

    苹果隐藏照片怎么恢复(苹果隐藏照片怎么上锁)

  • oppo智能拦截怎么设置(oppo智能拦截的短信在哪里)

    oppo智能拦截怎么设置(oppo智能拦截的短信在哪里)

  • x27有面部解锁吗(x27有面部解锁吗怎么设置)

    x27有面部解锁吗(x27有面部解锁吗怎么设置)

  • 微信如何搜公众号(微信公众号怎么开)

    微信如何搜公众号(微信公众号怎么开)

  • 城市赚钱生意——创办一家点子公司(城市赚钱项目)

    城市赚钱生意——创办一家点子公司(城市赚钱项目)

  • 建筑业购买材料计入什么科目
  • 进入税金及附加怎么算
  • 减税性质代码及名称是什么意思
  • 怎么恢复自然人个人信息
  • 收到增值税发票是进项还是销项
  • 电子税务局上财务制度备案错误是啥意思
  • 行政单位其他收入包括哪些
  • 工作未满12个月被辞退时前月平均工资怎么计算
  • 劳务外包要通过应付职工薪酬吗
  • 承兑汇票兑现怎么填写
  • 增值税普通发票怎么开
  • 航天金税服务费怎么做账
  • 增值税申报表第31栏为什么有数字
  • 小规模纳税人装修费用计入什么科目
  • 税务申报逾期怎么在网上申报
  • 变更税务登记证法人需要哪些资料
  • 清算时土地增值税计税依据
  • 收到未到期的银行承兑汇票会计分录
  • 账务不符怎么写
  • 成本费用的结转方法
  • 存货计价方法的选择对利润表中的项目没有影响
  • gitlab lint
  • 技术开发合同收入包括哪些
  • 系统之家装机可靠吗
  • PHP:curl_multi_info_read()的用法_cURL函数
  • 实收资本和注册资本不一致的会计处理
  • vue3 + ts
  • 如何解决Vue3没有代码提示问题?
  • 下载vue2
  • uni-app原理
  • php实现将base64格式图片保存在指定目录的方法
  • 物业代收代缴费 没住户怎么办
  • swatch of
  • 人工费和劳务费怎么算
  • 修的公路是否上固定资产
  • 物业公司收的水费是计入其他应付款还是其他业务收入
  • 红冲后的发票税怎么办
  • 事业单位收入入账
  • 帝国cms调用api接口
  • 织梦怎么调用当前栏目下的文章
  • 投资款要不要交企业所得税?
  • 小规模纳税人征收率5%的情况
  • 电子承兑背书一般多久到账
  • 母公司溢价收购子公司
  • 生产过程中的不良品怎么处理
  • 水利建设税怎么做账
  • 外币存款利息是不是外币
  • 不得免征和抵扣税额抵减额分录
  • 税控系统技术维护费的申报抵扣方法
  • 银行存款付款是借方还是贷方
  • 应付账款在借方
  • 无形资产出资入股的会计处理
  • 年初建账的期初余额
  • 使用mysql进行模糊查询
  • 右下角小喇叭调不了声音
  • windowsxp的安装方法
  • windows10 命令行
  • linux计划任务不生效
  • centos7取消挂载硬盘
  • xp注册表文件在哪
  • linux ssh安装包
  • 苹果服务器操作系统
  • win8语音助手怎么关闭
  • win10如何不升级系统
  • cocos2dx schedule
  • nodejs和mysql
  • 计算机图形学中点画圆法
  • jqgrid getrowdata
  • Node.js中的事件循环是什么
  • unity3d课程
  • echarts图表
  • js中倒计时器怎么实现
  • 原生js页面滚动怎么设置
  • python定义全局
  • 增值税的进项税额转出是什么意思
  • 国家税务总局好进吗
  • 江苏医保网上服务大厅
  • 什么情况下要交印花税
  • 所有企业都要做应急预案吗
  • 社会保险登记表下载
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设