There are a group of canvas enthusiasts in the community, including JSH5CSS, Quiet Xiaozhi, Jeffer and others, who have their own learning experience and opinions on canvas. But bliss uncle found in a small program development in the learning process there are still a lot of friend to stumble on the canvas, so we in the community home page tutorial specially opened a canvas in learning, but feel is still not enough, the canvas in the entire network knowledge is too little, so the concentration of the entire network information today, convenient later encounter problems of students, Possible references can be found.

If there are any mistakes or parts that need to be added in this article, welcome to raise or add to the students! You can also contribute your canvas experience or demo in the background, I will add in later




The Demo:

Wechat applet Demo component: stock time-sharing chart

Micro channel small program widget: Imitation live dot like bubble effect, based on Canvas

Qr code generator; Canvas and pure JS version of two-dimensional code generation

Wechat small program learning with a complete demo: Canvas Graffiti (including node back-end)

Canvas Demo: Matrix Metrix effect, gradient clock

Rotary draw: Canvas drawing configurable (has been updated)

Wechat small program Demo: Canvas hand-painted radar map

Wechat small program learning demo: loaded force generator: Canvas drawing pictures

Micro channel small program learning demo: gobang, based on canvas

Play Canvas- Cool list alphabetic index

Wechat small program Demo: Canvas special clock

Wechat applet demo: Dynamic bar chart based on Canvas

Wechat small program Demo: Draw line chart with Canvas

Micro channel small program learning with demo: snake; Canvas use

Flying Bird: Canvas implementation, Java back end (applicable to 1221)

Wechat small program learning demo recommended: Douban film, Canvas clock

Wechat small program Demo: Small Roll Call: Canvas, based on leanCloud

Wechat applet learning with Demo: Canvas countdown

In actual combat

My canvas uses a summary

WeZRender: Wechat miniprogram Canvas enhancement component

Canvas of wechat applets – Play FlappyBird badly

Wechat small program canvas component simple use of graffiti

I’m a little busy today. I masturbated for a segment –Canvas Training (The introduction version of Snake)

Wx-charts: Based on Canvas: pie chart, line chart and bar chart

Learn to use demo collection: Top tip, Canvas webSocket

Small procedures based on canvas drawing high-speed rail line map

Wechat mini program training project collection: Canvas, Douban

Wechat applet effect (CSS3 and Canvas two implementations)

Bar chart and trend chart based on wechat applet Canvas API

Wechat small program: canvas map drawing and simple dragging

Chart control based on wechat small program Canvas, suitable for wepy framework

WeChat applet | using canvas generated friends share photo albums and save to the phone

Canvas animation “Zrender for wxDraw Miniprogram” with wxdraw.js

Wechat applet — Drawing canvas

Wechat applet: Canvas Tablet effect

Canvas drawImage understands the method of image image adaptive width proportional display

Wechat small program Canvas drawing graphics foundation

Canvas base drawing, the timestamp is converted to days ago, hours ago, minutes ago

Use Canvas to draw clock tutorial on wechat applet

Small program based on drawing high-speed rail line map

Wechat small program actual combat development tutorial: gesture unlock; Based on the canvas

Wechat applet uses Canvas to draw TWO-DIMENSIONAL code

Small program Canvas draw K line, diary from 0 (1)

Small program Canvas draw K line, diary from 0 (2)

Canvas draws wechat applet Canvas clock

Wechat small program canvas component simple use of graffiti

Wechat small program Canvas, the realization of the whole process of demonstration including demo

Wechat applet playing “Fourteen” : Canvas API

Tip: canvas ToTempFilePath and get screen width and height

Wechat small program Canvas test experience dry goods

Jumping pit

Pit “One Hundred eleven” Canvas learning and usage instructions

SF Q&A picks canvas 6 does not show questions

The workarounds for the highest levels of Canvas, Textarea and video in 107

Configure HTTPS on the background server to obtain the canvas size

None of the encryptedData Settings is valid

How to introduce Canvas drawing picture blur & math.js

Configure HTTPS on the background server to obtain the canvas size

Why is the Canvas component always on top

Canvas drawImage problem

Canvas for memory

Canvas drawing problem

Bug of wechat miniprogram Canvas drawImage

Canvas drawImage is not displayed on the real machine

The image on the canvas drawImage line is not displayed

Wechat mini program canva various pits?

I use a small program canvas to write a scratch card, brush color can not use transparent!!