XML/HTML Code復(fù)制內(nèi)容到剪貼板
- var canvas = document.getElementById('canvas');
- if (canvas.getContext) {
- var context = canvas.getContext('2d');
- // 線寬
- context.lineWidth = 4;
- // 畫(huà)筆顏色
- context.strokeStyle = 'red';
- // 填充色
- context.fillStyle = "red";
- // 線帽類型
- context.lineCap = 'butt'; // round, square
- // 開(kāi)始路徑
- context.beginPath();
- // 起點(diǎn)
- context.moveTo(10,10);
- // 終點(diǎn)
- context.lineTo(150,50);
- // 繪制
- context.stroke();
- ｝
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- var canvas = document.getElementById('canvas');
- if (canvas.getContext) {
- context.beginPath();
- context.strokeRect(10,10,70,40);
- // 矩形的另一種方式
- context.rect(10,10.70,40);
- context.stroke();
-
- // 實(shí)心矩形
- context.beginPath();
- context.fillRect(10,10,70,40);
- // 另一種方式實(shí)心矩形
- context.beginPath();
- context.rect(10,10,70,40);
- context.fill();
- ｝
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- var canvas = document.getElementById('canvas');
- if (canvas.getContext) {
- context.beginPath();
- // 圓中心坐標(biāo)x, 圓中心坐標(biāo)Y, 圓弧半徑， 起始角度，終止角度，是否逆時(shí)針
- // 第4個(gè)參數(shù)和第五個(gè)參數(shù)是要傳入的弧度，如果畫(huà)30角度，需要將其轉(zhuǎn)化為弧度 30 * Math.PI / 180
- context.arc(100,100,70,0,130 * Math.PI / 180, true);
- context.stroke();
- context.fill();
- ｝
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- var canvas = document.getElementById('canvas');
- if (canvas.getContext) {
- context.beginPath();
- context.moveTo(20,20);
- context.lineTo(70,20);
- // 為一條路徑畫(huà)弧度p1.x p1.y p2.x, p2.y 弧半徑，
- context.arcTo(120,30,120,70, 50);
- context.lineTo(120,120);
- context.stroke();
-
- // 擦除canvas 畫(huà)板
- context.beginPath();
- context.fillRect(10,10,200,100);
-
- // 擦除區(qū)域
- context.clearRect(30,30,50,50);
- ｝
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- var canvas = document.getElementById('canvas');
- if (canvas.getContext) {
- context.beginPath();
- context.moveTo(100,100);
- context.quadraticCurveTo(20,50,200,20);
- context.stroke();
- ｝
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- var canvas = document.getElementById('canvas');
- if (canvas.getContext) {
- context.moveTo(68,130);
- var cX1 = 20;
- var cY1 = 10;
- var cX2 = 268;
- var cY2 = 10;
- var endX = 268;
- var endY = 170;
- context.bezierCurveTo(cX1, cY1, cX2, cY2, endX, endY);
- context.stroke();
-
- // 利用clip指定繪圖區(qū)域，指定繪圖區(qū)域之后，只能在繪圖區(qū)域中進(jìn)行繪圖擦歐總
- // 繪制圓形
- context.arc(100,100,40,0, 360 * Math.PI/ 180 , true);
- // 限制區(qū)域
- context.clip();
- // 開(kāi)始嘗試?yán)L制其他
- context.beginPath();
- context.fillStyle = 'lightblue';
- // 結(jié)果矩形并沒(méi)有顯示出來(lái)
- context.fillRect(0,0,300,150);
- }
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- var canvas = document.getElementById('canvas');
- if (canvas.getContext) {
- var context = canvas.getContext('2d');
- /*
- * drawImage(image,dx,dy)
- * drawImage(image,dx,dy,dw,dh)
- * drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
- * image 繪圖對(duì)象
- * dx dy canvas 的坐標(biāo)
- * dw，dh 表示 image 在canvas中即將繪圖的位置
- * sw，sh 表示image 所要繪圖的區(qū)域
- * sx,sy 所要繪圖的開(kāi)始位置
- */
- var image = document.getElementById('img');
- context.drawImage(image, 0, 0);
- var img = new Image();
- img.src = 'images/1.jpg';
- img.onload = function(){
-
- // drawImage
- // 從 0,0 坐標(biāo)開(kāi)始繪制
- // context.drawImage(img,0,0);
- // 從0，0 開(kāi)始,繪制整張圖到100,100 長(zhǎng)寬
- // context.drawImage(img, 0, 0, 100, 100);
- // 截圖,50,50 到 100,100 從 260,130 開(kāi)始繪制，放到 100,100 長(zhǎng)寬區(qū)域中
- // context.drawImage(img, 50, 50, 100,100, 260, 130, 100, 100);
-
- // 利用getImageData 和 putImageData 繪制圖片
-
- context.drawImage(img, 10, 10);
- // 從畫(huà)板上獲取像素?cái)?shù)據(jù)
- // 開(kāi)始位置， 結(jié)束位置
- var imgData = context.getImageData(50,50,100,100);
- // 將數(shù)據(jù)畫(huà)到畫(huà)板指定位置坐標(biāo)
- context.putImageData(imgData,10,260);
- // 將所去的像素?cái)?shù)據(jù)一部分，畫(huà)到畫(huà)板上
- context.putImageData(imgData,200,260,50,50,100,100);
-
- // createImageData 創(chuàng)建像素
- var imgData = context.getImageData(50,50,200,200);
- // 創(chuàng)建指定大小的空對(duì)象
- var imgData01 = context.createImageData(imgData);
-
- for (i = 0; i < imgData01.width * imgData01.height * 4; i+=4) {
- // 紅色像素
- imgData01.data[i + 0] = 255;
- imgData01.data[i+1] = 0;
- imgData01.data[i+2] = 0;
- imgData01.data[i+3] = 255;
-
- }
- context.putImageData(imgData01, 10, 260);
- }
- }
