-
文本對齊方式
查看全部 -
context.font設(shè)置
查看全部 -
context.font = "bold 40px Arial"(粗框,40px大小,字體)
context.fillStyle="#058"顏色
context.fillText(string,x,y,[maxlen](文字的最長寬度))
context.strokeText(string,x,y,[maxlen])(只有外邊框的文字)
查看全部 -
貝塞爾曲線
查看全部 -
曲線的繪制
查看全部 -
三次貝塞爾曲線，有兩個控制點
查看全部 -
二次貝塞爾曲線，(x0, y0)就是曲線的起始點，(x2, y2)就是曲線的終止點?
查看全部 -
arcTo
查看全部 -
canvas?變換矩陣
查看全部 -
lineJoin
miter(default)、 bevel斜接、 round圓角
miterLimit
查看全部 -
畫一個五角星
封裝五角星函數(shù)
查看全部 -
畫一個五角星
查看全部 -
線條屬性
lineCap — 線條帽子：
+ butt (default)
+ round 圓頭
+ square? 方頭
注意：lineCap只能用于線段的開始處和結(jié)尾處
查看全部 -
總結(jié)：
HTML—創(chuàng)建一個畫布：
<canvas?id="canvas"></canvas>
JavaScript—
//創(chuàng)建繪圖變量 var?canvas?=?document.getElementById('canvas'); //獲取繪圖上下文環(huán)境 var?context?=?canvas.getContext("2d"); //使用context進行繪制canvas常用的屬性：
canvas.width? canvas.height? canvas.getContext('2d')canvas構(gòu)成線條使用方法：
moveTo(x,?y); lineTo(x,?y); beginPath(); closePath();
canvas具體狀態(tài)設(shè)置：
lineWidth?—?線條 strokeStyle?—?線條樣式 fillStyle?—?填充樣式 stroke()?—?函數(shù)?繪制邊框 fill()?—?函數(shù)?進行填充
簡易函數(shù)—矩形
rect(x,?y,?width,?height)?—?繪制矩形邊框路徑 fillRect(x,?y,?width,?height)?—?具體填充矩形 strokeRect(x,?y,?width,?height)?—?繪制帶有邊框矩形
查看全部 -
transform()是可以不斷累加的? setTransform() 可以讓之前的transform()累加的效果失效??setTransform類似于重新設(shè)置
查看全部
舉報
0/150
提交
取消