canvas畫布基本操作

簡單畫直線和三角形（結合注釋）–線條繪製

"canvas" width=

"1024" height=
"768" style=
"border: 1px solid #aaa; display: block; margin: 50px auto;"
>
當前瀏覽器不支援canvas，請更換瀏覽器後再試
<
/canvas>
// canvas是基於狀態繪製的
window.
onload
=function()
*/var canvas = document.
getelementbyid
('canvas');
var context = canvas.
getcontext
('2d');
// 得到繪圖的上下文環境 使用context繪製
// 繪圖第一步 狀態設定
context.
moveto
(100
,100);
context.
lineto
(700
,700);
// 1 + 2 一條直線
context.
lineto
(100
,700);
context.
lineto
(100
,100);
// 1 + 2 + 3 + 4 乙個三角形
context.linewidth =5;
//線條寬度
context.strokestyle =
"blue"
;//線條樣式 可以使用css任意方法賦值
//繪製
context.
stroke()
;// 筆劃，用於繪製線條
}<
/script>
<
/body>

著色繪製

"canvas" width=

"1024" height=
"768" style=
"border: 1px solid #aaa; display: block; margin: 50px auto;"
>
當前瀏覽器不支援canvas，請更換瀏覽器後再試
<
/canvas>
window.
onload
=function()
*/var canvas = document.
getelementbyid
('canvas');
var context = canvas.
getcontext
('2d');
// 得到繪圖的上下文環境 使用context繪製
// 繪圖第一步 狀態設定
context.
moveto
(100
,100);
context.
lineto
(700
,700);
// 1 + 2 一條直線
context.
lineto
(100
,700);
context.
lineto
(100
,100);
// 1 + 2 + 3 + 4 乙個三角形
context.fillstyle =
"skyblue"
;// 填充顏色樣式
context.
fill()
;//著色
// 著色後繪製線條
context.linewidth =5;
//線條寬度
context.strokestyle =
"black"
;//線條樣式 可以使用css任意方法賦值
context.
stroke()
;// 筆劃，用於繪製線條
繪製七巧板（無數個版都可以繪製）
"canvas" style=

"border: 1px solid aaa; display: block; margin: 50px auto;"
>
你的瀏覽器不支援canvas，請更換瀏覽器後再試
<
/canvas>
var tangram =[,
,],color:
'#caff67'},
,,],color:
'#67becf'},
,,,]
,color:
'#ef3d61'},
,,],color:
'#f9f51a'},
,,],color:
'#a594c0'},
,,],color:
'#fa8ecc'},
,,],color:
'#f6ca29'},
] window.
onload
=function()
*/var canvas = document.
getelementbyid
('canvas');
canvas.width =
800;
canvas.height =
800;
var context = canvas.
getcontext
('2d');
for(
var i =
0; i < tangram.length; i ++
)function
draw
(piece, cxt)
cxt.
closepath()
; cxt.fillstyle = piece.color;
cxt.
fill()
;}}<
/script>
<
/body>
效果
 
Selenium之Canvas畫布操作
現在有乙個場景是需要進入到 canvas畫布中 進行單擊操作，現在使用過如下方法 canvas driver.find element by xpath canvas id canvas actions.move to element canvas move by offset 600,270 cl...
對畫布繪製實現動畫 Canvas的基本操作
由於是用指令碼操控canvas物件的，這樣要實現一些互動動畫也是相 當容易的。只不過，canvas 從來都不是專門為動畫而設計的 不像 flash 這樣難免會有些限制。可能最大的限制就是影象一旦繪製出 來，它就是一直保持那樣了。如果需要移動它，我們不得不對所有東西 包括之前的 進行重繪了。對畫布繪製...
了解canvas畫布
一 什麼是 canvas？二 canvas基本使用 mycanvas width 300 height 300 canvas canvas畫布的預設尺寸是300 150 1 獲取到canvas元素 var c document.getelementbyid mycanvas 2 執行上下文 繪製畫筆...