BlueOS Studio中使用canvas

简介: BlueOS Studio中使用canvas

创建 canvas 画布

这里需要写在【template】标签中

<div class="content">

     <canvas class="new-canvas" id="new-canvas"></canvas>

</div>

写样式

<style>

 .content {

   flex-direction: column;

   align-items: center;

   width: 100%;

 }

 .new-canvas {

   height: 380px;

   width: 380px;

 }

</style>

绘制

是否绘制

drawComplete: false

声明与绘制

     const canvas = this.$element('new-canvas') //获取 canvas 组件

     const ctx = canvas.getContext('2d') //获取 canvas 绘图上下文

     //绘制一个矩形

     ctx.fillStyle = 'rgb(200,0,0)'

     ctx.fillRect(20, 20, 200, 200)

     //绘制另一个矩形

     ctx.fillStyle = 'rgba(0, 0, 200, 0.5)'

     ctx.fillRect(80, 80, 200, 200)

     this.drawComplete = true

实际效果:

这个4+4也就是使用canvas来生成的,难度中等,但是不能使用document来操作,因为核心没有。

vue的canvos与html的canvos的区别

Vue.js的Canvas与HTML Canvas在以下几个方面存在一些区别:

运行环境:HTML Canvas 是HTML标准的一部分,可以直接在浏览器中运行。而Vue.js的Canvas通常是在浏览器之外运行的,例如在Node.js环境中,Vue.js是一个JavaScript框架,提供了一种构建用户界面的方法。

使用方式:HTML Canvas 是通过HTML标签直接在网页中使用的,而Vue.js的Canvas通常是通过在Vue组件中创建画布元素,并在该元素上绘制图形的方式使用。

功能和API:HTML Canvas 提供了一些基本的绘图API,如画线、填充等。而Vue.js通常是通过使用其他库(如vue-konva或vue-fabric-canvas等)来提供更高级的绘图功能和更丰富的API。

视图更新:HTML Canvas 的视图更新是实时的,这意味着你可以实时地看到你的绘图操作。而Vue.js的Canvas视图更新可能不是实时的,这取决于你的代码如何使用它。

框架依赖:Vue.js是一个完整的框架,提供了许多额外的功能,如数据绑定、组件系统、路由、状态管理等。而HTML Canvas 只是HTML标准的一部分,没有这些额外的功能。

总的来说,Vue.js的Canvas与HTML Canvas的主要区别在于运行环境、使用方式、功能和API、视图更新以及框架依赖等方面。选择使用哪种Canvas取决于你的具体需求和环境。如果你只需要基本的绘图功能,HTML Canvas 可能是个不错的选择。但如果你需要更强大和灵活的绘图功能,以及与Vue.js的集成,那么使用Vue.js的Canvas可能更适合你。

相关文章
|
11月前
|
编译器 C++
Visual Studio 2022 中如何设置背景图片,壁纸
Visual Studio 2022 中如何设置背景图片,壁纸
|
前端开发
Canvas入门(四)
Canvas入门(四)
110 0
|
前端开发 JavaScript
Canvas入门(三)
Canvas入门(三)
117 0
|
前端开发
Canvas入门(二)
Canvas入门(二)
154 0
|
前端开发
Canvas入门(一)
Canvas入门(一)
230 0
|
编解码 API Android开发
Android Studio中的 Image Asset Studio(图标生成工具)
Android 图标在线生成 Image Asset 是什么 Launcher icons Action bar and tab icons Vector Asset Studio使用: Notification icons Clip Art Images Text 使用 Image Asset Studio 创建Launcher Icons(Adaptive and Legacy) 创建Launcher Icons(Legacy only) 创建Action bar and tab icons 创建Notification icons
758 0
Android Studio中的 Image Asset Studio(图标生成工具)
|
移动开发 前端开发 JavaScript
canvas从入门到猪头
canvas从入门到猪头
canvas从入门到猪头
|
开发工具 Android开发
Android Studio插件之sexy editor(设置AS背景)
Android Studio插件之sexy editor(设置AS背景)
Android Studio插件之sexy editor(设置AS背景)
|
移动开发 Dart 小程序
基于Flutter的Canvas探索与应用
目前在小程序互动场景下遇到的业务痛点,并且给出了基于Flutter引擎的解法。基于Flutter引擎,对外提供标准的Web Canvas API和并利用flutter渲染管线,让业务代码在小程序worker线程中直接渲染,缩短了渲染链路,提高了渲染性能。本次分享将由淘宝技术部无线开发专家万红波为大家分享目前在小程序互动场景下遇到的业务痛点,以及基于Flutter引擎的解法。
2299 0
基于Flutter的Canvas探索与应用
[UWP]使用Reveal
原文:[UWP]使用Reveal 1. 前言 之前在 如何使用Fluent Design System 这篇文章里已经简单介绍过Reveal的用法,这篇再详细介绍其它内容。 2. 自定义RevealButtonStyle 我觉得常用ItemsControl都已经自动应用了Reveal,用就是了。
991 0