了解canvas畫布

一、什麼是 canvas？

二、canvas基本使用

"mycanvas" width=

"300" height=
"300"
>
<
/canvas>

// 1、獲取到canvas元素

var c= document.
getelementbyid
("mycanvas");
// 2、執行上下文（繪製畫筆）
var ctx= c.
getcontext
('2d');
// 3、填充矩形
ctx.
fillrect(30
,30,100
,100);
<
/script>

繪製矩形

"mycanvas" width=

"200" height=
"100"
>
<
/canvas>
//根據指定id，得到物件
var c=document.
getelementbyid
("mycanvas");
//然後建立context物件
var cxt=c.
getcontext
("2d");
//fillstyle屬性可以填充顏色。
cxt.fillstyle=
"pink"
;    cxt.
fillrect(0
,0,150,75
);<
/script>

"mycanvas" width=

"200" height=
"100"
>
<
/canvas>
//根據指定id，得到物件
var c=document.
getelementbyid
("mycanvas");
//然後建立context物件
var cxt=c.
getcontext
("2d");
cxt.
beginpath()
;    cxt.
moveto(10
,10);
//移動到指定位置，開始座標
cxt.
lineto
(150,50
);//建立到達位置的一條線，結束座標
cxt.
lineto(10
,50);
cxt.strokestyle=
"pink"
;//路徑顏色
cxt.linewidth=
"5";
// 線寬
cxt.
stroke()
;//進行繪製（結束，顏色，寬度等都在裡面進行）
<
/script>

"mycanvas" width=

"200" height=
"100"
>
<
/canvas>
//根據指定id，得到物件
var c=document.
getelementbyid
("mycanvas");
//然後建立context物件
var cxt=c.
getcontext
("2d");
cxt.
beginpath()
;    cxt.strokestyle =
"pink"
;//arc(x,y,半徑,起始角度0，結束角度2*math.pi)
cxt.
arc(95,
50,40,
0,2*math.pi)
;    cxt.
stroke()
;<
/script>

"cv" width=

"300px" height=
"300px"
>
<
/canvas>
var canvas = document.
getelementbyid
("cv");
var context = canvas.
getcontext
("2d");
context.
beginpath()
;        context.
arc(
100,
100,
100,
0,math.pi*
2);        context.
closepath()
;        context.
stroke()
;        
context.
beginpath()
;        context.
arc(
100,
100,
100,
1.5,math.pi*
1.5)
;        context.
closepath()
;        context.
fill()
;        		
context.
beginpath()
;        context.
arc(
100,50,
50,0,math.pi*
2);        context.fillstyle =
"white"
;        context.
closepath()
;        context.
fill()
;        
context.
beginpath()
;        context.
arc(
100,
150,50,
0,math.pi*
2);        context.fillstyle =
"black"
;        context.
closepath()
;        context.
fill()
;        
context.
beginpath()
;        context.
arc(
100,50,
15,0,math.pi*
2);        context.fillstyle =
"black"
;        context.
closepath()
;        context.
fill()
;        
context.
beginpath()
;        context.
arc(
100,
150,15,
0,math.pi*
2);        context.fillstyle =
"white"
;        context.
closepath()
;        context.
fill()
;<
/script>

學習canvas畫布

我們可以用畫布 canvas 繪製各種圖形，下面 是繪製的乙個圓形 doctype html html head title canvas畫布 title meta charset utf 8 meta name viewport content width device width,initial...

canvas畫布基本操作

簡單畫直線和三角形 結合注釋 線條繪製 canvas width 1024 height 768 style border 1px solid aaa display block margin 50px auto 當前瀏覽器不支援canvas，請更換瀏覽器後再試 canvas canvas是基於狀態...

canvas畫布講解 二

陰影屬性 shadowcolor 設定陰影顏色 shadowblur 設定陰影模糊級別 值越大越模糊 shadowoffsetx 設定陰影在x軸上距離圖形的距離 shadowoffsety 設定陰影在y軸上距離圖形的距離 繪製影象 drawimage img,x,y img x 橫座標的起始值 y ...