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;

// }