1.方式一:先設(shè)置 rect, 再設(shè)置樣式
2.方式二:先設(shè)置樣式, 再設(shè)置strokeRect,fillRect
1. 快速創(chuàng)建矩形rect()方法
- 語法：ctx.rect(x, y, width, height);
- 解釋：x, y是矩形左上角坐標(biāo)， width和height都是以像素計(jì)
- rect方法只是規(guī)劃了矩形的路徑，并沒有填充和描邊。
- 改造案例：04填充矩形.html
- rect: abbr. 矩形（rectangular）；收據(jù)（receipt）
2. 快速創(chuàng)建描邊矩形和填充矩形
- 語法： ctx.strokeRect(x, y, width, height);
- 參數(shù)跟ctx.rect相同，注意此方法繪制完路徑后立即進(jìn)行stroke繪制
- 語法：ctx.fillRect(x, y, width, height);
- 參數(shù)跟ctx.rect相同， 此方法執(zhí)行完成后。立即對(duì)當(dāng)前矩形進(jìn)行fill填充。
3. 清除矩形(clearRect)
- 語法：ctx.clearRect(x, y, width, hegiht);
- 解釋：清除某個(gè)矩形內(nèi)的繪制的內(nèi)容，相當(dāng)于橡皮擦。
繪制圓形（arc)
- 概述：arc() 方法創(chuàng)建弧/曲線（用于創(chuàng)建圓或部分圓）。
- 語法：ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);
- arc: ?。ǘ龋┗⌒挝?；天穹 英 [ɑ?k] 美 [ɑrk]
- counter 反擊，還擊；反向移動(dòng)，對(duì)著干；反駁，回答 ['ka?nt?] 美 ['ka?nt?]
- 解釋：
- x,y：圓心坐標(biāo)。
- r：半徑大小。
- sAngle:繪制開始的角度。 圓心到最右邊點(diǎn)是0度，順時(shí)針方向弧度增大。
- eAngel:結(jié)束的角度，注意是弧度。π
- counterclockwise：是否是逆時(shí)針。true是逆時(shí)針，false：順時(shí)針(默認(rèn))
- 弧度和角度的轉(zhuǎn)換公式： rad = deg*Math.PI/180;
- 在Math提供的方法中sin、cos等都使用的弧度
image.png
三角函數(shù)的補(bǔ)充
Math.sin(弧度); //夾角對(duì)面的邊 和 斜邊的比值
Math.cos(弧度); //夾角側(cè)邊 與斜邊的比值
圓形上面的點(diǎn)的坐標(biāo)的計(jì)算公式
x =x0 + Math.cos(rad) * R;//x0和y0是圓心點(diǎn)坐標(biāo)
-
y =y0 + Math.sin(rad) * R;//注意都是弧度
image.png
繪制圖片（drawImage） （重點(diǎn)）
1 基本繪制圖片的方式
- context.drawImage(img,x,y);
- 參數(shù)說明： x,y 繪制圖片左上角的坐標(biāo)，在畫布上繪制的坐標(biāo)點(diǎn) img是繪制圖片的dom對(duì)象。
2 在畫布上繪制圖像，并規(guī)定圖像的寬度和高度
- context.drawImage(img,x,y,width,height);
- 參數(shù)說明：width 繪制圖片的寬度, height：繪制圖片的高度
- 如果指定寬高，最好成比例，不然圖片會(huì)被拉伸
- 等比公式： toH = Height * toW / Width;
- 設(shè)置的高度 = 原高度 * 設(shè)置的寬度 / 原寬度;
3 圖片裁剪，并在畫布上定位被剪切的部分
- context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
- 參數(shù)說明：
- sx,sy 裁剪的左上角坐標(biāo)，
- swidth：裁剪圖片的高度。
- sheight:裁剪的高度
- 其他同上
4 用JavaScript創(chuàng)建img對(duì)象
- 第一種方式：
var img = document.getElementById("imgId");
- 第二種方式：
var img = new Image();//這個(gè)就是 img標(biāo)簽的dom對(duì)象
img.src = "imgs/arc.gif";
img.alt = "文本信息";
img.onload = function() {
//圖片加載完成后，執(zhí)行此方法
示意圖:
- 原圖片:
ctx.drawImage(img, 100, 100, 300, 216);
- 截取圖片:
裁剪的位置: sx,sy,swidth,sheight : 50 50 120 120
sx,sy,swidth,sheight 相對(duì)于原圖片的裁剪區(qū)域
放置位置:x,y,width,height : 350, 100, 120, 120
x, y ,width, height 相對(duì)于畫布的顯示區(qū)域
ctx.drawImage(img, 50, 50, 120, 120, 450, 100, 120, 120);
image.png
