How to use canvas in Vue and uniapps

Updated: October 25, 2022 09:49:22 Author: Wu·Sang

Speaking of canvas, a new tag added to css3, and the pie chart is a classic canvas. Our company is now using the uni-app framework to develop APPs. The following article mainly introduces relevant information about how to use canvas in Vue and uniapps. Friends who need it can refer to it.

How to use canvas in Vue and uniapp?

In general, we use canvas in this way

//Create the canvas element&lt;canvas
      
      width="1400"
      height="790"
      style="display: block;position: absolute;top:0;"
      /&gt;
      
//Find the canvas elementconst canvas = ("output_mini");
      
//Create a context object = ("2d");

//Then draw lines and circles and other operations(0,0);  //Define the start coordinate (0,0)(200,100); //End coordinates (200,100)(); // stroke() method to draw lines:

However, in uniapp, you cannot create context objects directly like above. You need to create a context object through the method provided by uniapp, and then perform other operations.

Example

//Create the canvas element&lt;canvas canvas- width="400" height="360" style="display: block;position: absolute;top:0;" 

//Create a context objectvar ctx = ('output_mini', this);

Attribute description

Attribute name	type	illustrate
type	String	Specify the canvas type, supporting 2d (2.9.0) and webgl
canvas-id	String	The unique identifier of the canvas component
disable-scroll	Boolean	When moving in canvas and there is a binding gesture event, screen scrolling and pull-down refresh is prohibited
hidpi	Boolean	Whether to enable high-definition processing
@touchstart	EventHandle	Finger touch action begins
@touchmove	EventHandle	Move after touching your finger
@touchend	EventHandle	Finger touching action ends
@touchcancel	EventHandle	The finger touching action is interrupted, the Tathagata call reminds, pop-up window
@longtap	EventHandle	After long pressing the finger for 500ms, the screen scrolling will not be triggered after long pressing.
@error	EventHandle	When an error occurs, the error event is triggered, detail = {errMsg: ‘something wrong’}

Notes:

The default width of the canvas tag is 300px and the height is 225px. After dynamically modifying the canvas size, it needs to be re-drawn.
h5. A single canvas with too large size in app-vue cannot be drawn in iOS/Safari (specific size restrictions have not been announced).
The canvas-id in the same page cannot be repeated. If a canvas-id that has appeared is used, the canvas corresponding to the canvas tag will be hidden and no longer work properly.
canvas is a native component in WeChat applets, Baidu applets, and QQ applets. The level is higher than the front-end component. Please do not be embedded in scroll-view, swiper, picker-view, and movable-view. To solve the problem that the canvas level is too high and cannot be covered, refer to native-component. The canvas of other applets are still the canvas in the webview.
The canvas in app-vue is still the canvas of the webview. If you need to use canvas under app-nvue, you need to download the plug-in.
Although app-vue's canvas is a canvas that comes with webview, it has higher performance than native canvas of nvue and WeChat applets. Note that it is not native = faster. The key to the smoothness of canvas animation is not the speed of the rendering engine, but to reduce the losses caused by frequent communication from the logic layer to the view layer.
Mini programs and app-nvue are difficult to draw very smooth canvas animations due to communication blockage. This problem does not exist with h5 and app-vue. But note that if you want to smoothly draw canvas animations under app-vue, you need to use renderjs technology to put the js logic that operates canvas into the view layer to run, so as to avoid frequent communication between the logic layer and the view layer. The canvas example of hello uni-app is very typical. When running this example on the same mobile phone, you can see that it is very smooth on the h5 end and the app end, while the mini-program side cannot achieve such smooth animations because it does not have renderjs technology.

Summarize

This is the end of this article about how to use canvas in Vue and uniapp. For more related content on Vue uniapp, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!

vue
uniapp
canvas

antd Form component method getFieldsValue to get the value of the custom component

This article mainly introduces the operation of obtaining the value of the custom component by the antd Form component method getFieldsValue, which has good reference value and hope it will be helpful to everyone. Let's take a look with the editor
2020-10-10
Vue randomly generates instances of different colors or random numbers through a for loop

Today, the editor will share with you an example of Vue randomly generating different colors or random numbers through for loops. It has good reference value and hope it will be helpful to everyone. Let's take a look with the editor
2019-11-11
Declarative Rendering and Conditional and Loop Basics

This article mainly introduces the basic knowledge of declarative rendering and conditions and loops in detail, which has certain reference value. Interested friends can refer to it.
2017-07-07
Example of vue navigation content setting selected status style

Today, the editor will share with you an example of setting selected status styles for vue navigation content. It has good reference value and hope it will be helpful to everyone. Let's take a look with the editor
2019-11-11
How to configure the on-demand automatic import API component unplugin-auto-import for vue3 project

This article mainly introduces the problem of how to configure the automatic import API component unplugin-auto-import on demand for vue3 projects. It has good reference value. I hope it will be helpful to everyone. If there are any errors or no complete considerations, I hope you will be very encouraged.
2024-03-03
Example of drag-and-drop sorting for Vue+Element tree table

This article mainly introduces the example of drag-and-drop sorting of Vue+Element tree table. The example code is introduced in this article in detail, which has certain reference learning value for everyone's study or work. Friends who need it, please learn with the editor below.
2022-08-08
Solution to the not detected error

This article mainly introduces solutions to the not detected error, which is of good reference value and hopes to be helpful to everyone. If there are any mistakes or no complete considerations, I hope you will be very grateful for your advice
2022-09-09
Two ways for Vue parent-child components to achieve two-way binding effect of data (case code)

This article will share with you two ways to achieve the two-way binding effect of Vue parent-child components. One is to implement the data through monitoring events and the other is to implement it through v-model. Each method is introduced to you in detail in combination with the example code. It has certain reference value for your study or work. If you need it, please refer to it.
2022-11-11
Solve the problem of Vue2.0 watch object property change cannot be listened to

Today, the editor will share with you an article to solve the problem of inability to monitor the attribute changes of Vue2.0 watch object. It has good reference value and hope it will be helpful to everyone. Let's take a look with the editor
2018-09-09
How to set vue route interception and page jump

This article mainly introduces the setting method of vue routing interception and page jump. It is very good and has certain reference value. Friends who need it can refer to it.
2018-05-05

How to use canvas in Vue and uniapps