canvas第二天

<canvas id="myCanvas" width=1000 height=1000></canvas>

    var canvas = document.getElementById("myCanvas");

var c = canvas.getContext('2d');

// var offscreen = document.createElement("canvas");

// offscreen.width = offscreen.height = 10;

// offscreen.getContext("2d").strokeRect(0,0,6,6);

// var pattern = c.createPattern(offscreen,"repeat");

// // 線性漸變

// var bgfade = c.createLinearGradient(0,0,canvas.width,canvas.height);

// bgfade.addColorStop(0.0, "#88f");

// bgfade.addColorStop(1.0, "#fff");

// // 兩個同心圓之間的一種漸變

// var peekhole = c.createRadialGradient(300,300,100, 300,300,300);

// peekhole.addColorStop(0., "transparent");

// peekhole.addColorStop(0.7,"rgba(100,100,100,.9)");

// peekhole.addColorStop(1.0, "rgba(0,0,0,0)");

// c.fillStyle = bgfade;

// c.fillRect(0,0,600,600);

// c.strokeStyle = pattern;

// c.lineWidth = 100;

// c.strokeRect(100,100,400,400);

// c.fillStyle = peekhole;

// c.fillRect(0,0,600,600);

// 擷取一個字元串的螢幕顯示寬度

// var width = c.measureText(text).width;

// 裁剪

// c.font = "bold 60pt sans-serif";

// c.lineWidth = 2;

// c.strokeStyle = "#000";

// // 勾勒矩形輪廓和文本輪廓

// c.strokeRect(175,25,50,325);

// c.strokeText("<canvas>", 15, 330);

// // 在外部定義一條包含内部的複雜路徑

// polygon(c,3,200,225,200);

// polygon(c,3,200,225,100,true);

// // 将該路徑定義成裁剪區域

// c.clip();

// // 用5個像素寬的線段來勾勒路徑，完全在裁剪區域内

// c.lineWidth = 10;

// c.stroke();

// c.fillStyle = "#aaa";

// c .fillRect(175,25,50,325);

// c.fillStyle = "#888";

// c.fillText("<canvas>",15,330);

// 定義一種不明顯的陰影

// c.shadowColor = "rgba(100,100,100,4)";

// c.shadowOffsetX = c.shadowOffsetY = 3;

// c.shadowBlur = 5;

// // 使用陰影在一個藍色的方框中繪制一些文本

// c.lineWidth = 10;

// c.strokeStyle = "blue";

// c.strokeRect(100,100,300,200);

// c.font = "Bold 36pt Helvetica";

// c.fillText("Hello World",115, 225);

// c.shadowOffsetX = c.shadowOffsetY = 20;

// c.shadowBlur = 10;

// c.fillStyle = "red";

// c.fillRect(50,25,200,65);

//使用drawImage()方法

// c.moveTo(5,5);

// c.lineTo(45,45);

// c.lineWidth = 8;

// c.lineCap = "round";

// c.stroke();

// // 定義一個變換

// c.translate(50,100);

// c.rotate(-45*Math.PI/180);

// c.scale(10,10)

// c.drawImage(c.canvas,0,0,50,50,0,0,50,50);

// // 畫布靜态截圖

// var img = document.createElement("img");

// img.src = canvas.toDataURL();

// document.body.appendChild(img);

//使用ImageData實作動态模糊

// function smear(c, n, x, y, w, h) {

// var pixels = c.getImageData(x,y,w,h);

// // 如果需要輸出緩沖區，可以以如下方式建立一個新的同樣尺寸的ImageData對象

// // var output_pixels = c.createImageData(pixels);

// var width = pixels.width, height = pixels.height;

// // data變量包含所有原始的像素資訊：從左到右，從上到下

// var data = pixels.data;

// // 每一行第一個像素之後的像素都通過将其色值替換成

// // 其色值得1/n +元色素值的m/n

// var m = n-1;

// for(var row = 0; row < height; row++) {

// var i = row*width*4 + 4; //每行第二個元素的偏移量

// for(var col = 1; col < width; i +=4) {

// data[i] = (data[i] + data[i-4]*m)/n; //像素中紅色分量

// data[i+1] = (data[i+1] + data[i-3]*m)/n;

// data[i+2] = (data[i+2] + data[i-2]*m)/n;

// data[i+3] = (data[i+3] + data(i-1)*m)/n;

// }

// }

// // 現将塗抹過的圖檔資料複制回畫布相同的位置

// c.putImageData(pixels,x,y);

// }

// 檢測一個滑鼠事件是否發生在目前路徑上

// 如果滑鼠事件發生指定的CanvasRenderingContext2D目前路徑上則傳回true

// function hitpath(context,event) {

// // 從canvas對象中擷取canvas元素

// var canvas = context.canvas;

// // 擷取畫布尺寸和位置

// var bb = canvas.getBoundingClientRect();

// // 将滑鼠事件坐标通過轉換和縮放變換成畫布坐标

// var x = (event.clientX-bb.left)*(canvas.width/bb.width);

// var y = (event.clientY-bb.top)*(canvas.height/bb.height);

// // 用這些變換後的坐标來調用isPointInPath()方法

// return context.isPointInPath(x,y);

// }

// // hitpath事件處理

// canvas.onclick = function(event) {

// if (hitpath(this.getContext("2d"),event)) {

// alert("Hit!");

// }

// };

// 檢測滑鼠事件觸發點的元素是否繪制過了

// 如果指定的滑鼠事件點下的像素不是透明的則傳回true

// function hitpath(context,event) {

// var canvas = context.canvas;

// var bb = canvas.getBoundingClientRect();

// // 将滑鼠事件坐标通過轉換和縮放變換成畫布坐标

// var x = (event.clientX-bb.left)*(canvas.width/bb.width);

// var y = (event.clientY-bb.top)*(canvas.height/bb.height);

// var pixels = c.getImageData(x,y,1,1);

// for(var i = 3; i < pixels.length;i+=4) {

// if (pixels.data[i] !== 0) return true;

// }

// return false;

// }