用H5 Canvas繪製乙個儀錶盤筆記

前端有許多做資料視覺化的圖表外掛程式，但有時候ui設計的圖可能用現成的js外掛程式無法定製或者比較麻煩（還不如自己造輪子來的快）。

下面記錄下用h5 canvas設計乙個儀錶盤**：

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
meta 
name
="generator"
content
="editplus®"
>
<
meta 
name
="author"
content
="">
<
meta 
name
="keywords"
content
="">
<
meta 
name
="description"
content
="">
<
title
>document
title
>
<
script 
src="tween.umd.min.js"
>
script
>
<
style
>
.container 
#bg, #ring 
#bg 
style
>
head
>
<
body 
style
="background-color: #ccc"
>
<
div 
class
="container"
>
<
div 
id="percent"
style
="z-index: 100; color: #fff;"
>0%
div>
<
canvas 
id="bg"
width
="138"
height
="138"
>
canvas
>
<
canvas 
id="ring"
width
="138"
height
="138"
>
canvas
>
div>
body
>
<
script
>
const bgcanvas 
=document.queryselector(
'#bg');
const ringcanvas 
=document.queryselector(
'#ring');
const bgctx 
=bgcanvas.getcontext('2d
');const ctx 
=ringcanvas.getcontext('2d
');const percentel 
=document.queryselector(
'#percent');
const pixelratio 
=window.devicepixelratio;
const bg_ring_width =6
; const pointer_ball_radius =6
; const canvas_width 
=138
; const canvas_height 
=138
; const inner_circle_radius =45
; if(pixelratio 
>1) 
function
createbgcircle() 
function
createbgring() 
let imageloaded 
=false
;let img 
=null; 
async 
function
createprocessring(radian) 
return
newpromise(resolve 
=>
}) } 
function
createballpointer(x, y) 
function
createanimation(startangle =0
, endangle 
=360
, callback) 
requestanimationframe(animate)
const p 
=    const tween 
=new
tween.tween(p) 
.to(, 
600) 
.easing(tween.easing.quadratic.out) 
.onupdate(() 
=>
)         .start();
} async 
function
setup() 
setup();
script
>
html
>

使用H5canvas繪製多個自上而下運動效果案例

1 doctype html 2 html 3 head 4 meta charset utf 8 5 title 多個圖形自上向下 title 6head 7 body 8 canvas id canvas width 300px height 400px canvas 9 script 10va...

用canvas繪製乙個簡易時鐘

在見識了html5中canvas的強大，筆者準備製作乙個簡易時鐘。下面就是成果啦，製作之前我們先分析一下，繪製乙個時鐘需要做哪些準備。一 1.首先這個時鐘分為表盤，指標 時針，分針，秒針 和數字三部分。2.表盤是個圓，這個簡單。3.繪製指標時，需要先獲取到系統時間，然後找到時間和角度的關係。4.然後...

uni用canvas繪製H5端的分享海報

花了一天多完成，幾個知識點 坑 的記錄 所以用的是wxqrcode.js，返回的是乙個base64，8是url的規範等級，否則長度超出後會報錯 this.qr wxqrcode.createqrcodeimg window.location.href,直接用繪圖方法就能根據base64畫出來 ctx...