canvas的繪製圖形
1.在html檔案中 新增canvas標籤
"canvas"
>
<
/canvas>
js
let canvas= document.
getelementbyid
('canvas'
)
let context = canvas.
getcontext
('2d'
);
canvas 座標
canvas 是乙個二維網格。
canvas 的左上角座標為 (0,0)
座標例項
如下圖所示，畫布的 x 和 y 座標用於在畫布上對繪畫進行定位。滑鼠移動的矩形框上，顯示定位座標。
canvas - 路徑
在canvas上畫線，我們將使用以下兩種方法：
moveto(x,y) 定義線條開始座標
lineto(x,y) 定義線條結束座標
;// 設定路徑起點
context.
lineto(0
,90+pointer.y)
;// 設定路徑終點
context.
lineto
(110
,210
+pointer.y)
;context.
lineto
(190
,100
+pointer.y)
;context.
lineto
(120
, pointer.y)
;context.
lineto
(100,85
+pointer.y)
;context.
lineto
(190
,100
+pointer.y)
;context.
lineto
(110
,210
+pointer.y)
;context.
lineto
(100,85
+pointer.y)
;context.
lineto(0
,90+pointer.y)
; // 關閉路徑
context.linewidth=1;
//寬度 可為小數
context.strokestyle=
'green'
//線條顏色
context.
stroke()
;圖形繪製基本完成
pointer.y是方便運動所設定
下一步是實現往返運動
參考文章
實現上下往返運動 所以x不變 y變化
pointer.y初始值40
設定速度speed為定值 實現勻速運動
往返條件 圖形運動到極值時方向改變
var flag;
if(pointer.y ==
200)
else
if(pointer.y ==40)
if(flag ==1)
else
同理 如果欲實現左右運動 x變化，y不變
其他運動軌跡可根據數學公式
完整**如下
<
!doctype html>
" utf-8"
>
canvas<
/title>
html,body,canvas
#canvas
<
/style>
settimeout((
)=>
;let
render=(
)=>
;var speed =2;
var flag;
(run=(
)=>
else
if(pointer.y ==40)
if(flag ==1)
else
render()
;requestanimationframe
(run)})
();}
,1500);
<
/script>
<
/head>
"canvas"
>
<
/canvas>
"canvas_right"
>
<
/canvas>
<
/body>
<
/html>
詳述Canvas 四 繪製曲線
canvas提供了4個繪製曲線的方法 arc x,y,stratangle,endangle,true false 預設為false arcto x1,y1,x2,y2,r x1,y2座標一,x2,y2座標2,r是圓弧半徑 quadraticcurveto dx,dy,x,y dx,dy控制點,x,...
canvas學習筆記 四） 繪製文字
1.filltext text,x,y maxwidth 在指定的 x,y 位置填充指定的文字，繪製的最大寬度是可選的 2.stroketext text,x,y,maxwidth 在指定的 x,y 位置繪製文字邊框，繪製的最大寬度是可選的 3.font value 文字的字型樣式 4.textal...
canvas繪製多邊形並填充
let canvas document.getelementbyid canvas canvas.width 800 畫布寬度 canvas.height 800 畫布高度 let context canvas.getcontext 2d canvasmonth context,100,100,40...