繪製正方形
//繪製正方形
//獲取canvas標籤
varcs
=document.queryselector(
'canvas')
//獲取canvas繪圖上下文(canvas繪圖的相關api)
varctx
=cs.getcontext('2d
')//繪圖
//01 移動畫筆moveto(x,y) 座標
ctx.moveto(
100,
100)
//02 劃線 座標
ctx.lineto(
300,
100)
ctx.lineto(
300,
300)
ctx.lineto(
100,
300)
ctx.lineto(
100,
100)
//以上兩行**只是乙個路徑，但還沒有繪製
//03 繪製
ctx.stroke()
script
>
body
>
html
>
圓形
//獲取繪圖api
varctx
=cs.getcontext('2d
')//繪製園
//arc(x,y,r,star,end,isni)
//x y座標 r半徑 star起始弧度 end終止弧度 isni是否逆時針
//角度和弧度的關係 角度/180=弧度/pi
//弧度=角度/180*pi
ctx.arc(
100,
100,60,
0,360/
180*math.pi)
ctx.stroke()
script
>
body
>
html
>
畫正方形image
剪下為正方形 param image 原始比如size大小為 400x200 pixels param newsize 正方形的size比如400pixels return 返回正方形 400x400 pixels uiimage squareimagefromimage uiimage image...
HTML5之Canvas畫正方形
1 2331 3233 3435 3637 3839 40分析說明 1 獲取canvas元素 var canvas document.getelementbyid canvas 2 取到上下文 var context canvas.getcontext 2d 3 填充繪製邊框 context.fil...
canvas直線 圓和正方形的畫法
var oca document.getelementbyid canvas var oev oca.getcontext 2d 設定繪圖環境 var w oca.width window.innerwidth var h oca.height window.innerheight 直線畫法 oev...