个人认为<canvas>是h5最重量级的新标签了，现在各种h5小游戏都是基于<canvas>的，它为游戏提供了一个功能强大的画布，可在画布上绘制丰富的内容，同时也催生出很多游戏引擎。现在就简单介绍一下<canvas>的一些基本绘图和图片处理功能：
1.绘制线条
绘图的基本步骤是：先用getContext("2d")获取二维绘图环境上下文，有二维那肯定也有三位了？是的，三维就要用到WebGL了，技术水平有限，今天就不讨论三维了（三围肿么这么耳熟~~！）。然后设置画笔样式，lineWidth画笔宽度，strokeStyle画笔颜色，lineCap线头样式。样式设置完毕后就开始绘图了，首先用moveTo()把一个看不到的光标移动到起点位置，然后lineTo()设定重点，最后stroke()画出线条。
<!DOCTYPE HTML><html><head><meta charset = "utf-8"><title>绘制线条</title><style> body,div{margin:0px;padding:0px;text-align:center} #canv{ border:2px solid black; border-radius:4px; box-shadow:0px 0px 10px black; -webkit-box-shadow:0px 0px 10px black; -moz-box-shadow:0px 0px 10px black; }</style></head><body> <h1>绘制线条</h1> <canvas id="canv" width="400px" height="300px"> 你若能看到这句话说明你浏览器不支持canvas! </canvas></body><script type="text/javascript"> var canv = document.getElementById("canv"); //获取2d上下文 var ctx = canv.getContext("2d"); //设置样式 ctx.lineWidth = 40; ctx.strokeStyle = "red"; ctx.lineCap = "round"; //butt ,square,round ctx.beginPath(); //设置起始点 ctx.moveTo(20,20); ctx.lineTo(200,200); //开始绘制定义好的路径 ctx.stroke();</script></html>2.绘制矩形
矩形的绘制步骤同上所述，但有两种绘制类型：实心矩形fillRect(起点x，起点y，长，宽)，空心矩形strokeRect(起点x，起点y，长，宽)。
var canv = document.getElementById("canv"); //获取2d上下文 var ctx = canv.getContext("2d"); //设置样式 ctx.lineWidth = 10; ctx.strokeStyle = "red"; //绘制实心矩形 ctx.fill; ctx.fillRect(10,10,100,100);3.绘制圆形
同样，也分实心和空心，主要用到arc(圆心x,圆心y,半径,其实角度,结束角度*Math.PI/180,顺逆时针);
var canv = document.getElementById("canv"); //获取2d上下文 var ctx = canv.getContext("2d"); //设置样式 ctx.lineWidth = 10; ctx.strokeStyle = "red"; /* ctx.beginPath(); //中心点，半径，始末角度，顺逆时针 ctx.arc(200,200,50,0,270*Math.PI/180,false); ctx.stroke();*/ //实心 ctx.fillStyle = "red"; ctx.beginPath(); ctx.arc(200,200,50,0,270*Math.PI/180,false); ctx.fill();4.擦除
能破就能立，能绘制就能擦除，用clearRect(起点x，起点y，擦出范围长，擦出范围宽)实现擦除。
//设置样式 ctx.lineWidth = 10; ctx.fillStyle = "red"; //绘制矩形 ctx.fillRect(10,10,200,100); //擦除 ctx.clearRect(30,30,100,50);
5.渐变
可实现两种渐变方式：线性渐变createLinearGradient()，径向渐变createRadialGradient()。
var canv = document.getElementById("canv"); //获取2d上下文 var ctx = canv.getContext("2d"); //径向渐变 var grd=ctx.createRadialGradient(100,100,10,100,100,50); grd.addColorStop(0.1,"red"); grd.addColorStop(0.8,"blue"); ctx.fillStyle=grd; ctx.fillRect(0,0,200,200);/* //线性渐变 var grd=ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0.2,"red");//必须0-1之间的数，代表颜色的渐变权重 grd.addColorStop(0.7,"blue"); ctx.fillStyle=grd; ctx.fillRect(0,0,200,200); */6.像素处理：黑白处理，反色处理
原理：先把要处理的图片读取到canvas上，然后遍历每个像素点，更改像素的rgb值即可。
黑白处理：
反色处理：
<body> <h1>像素处理</h1> <img src = "logo.png" id="logo" /> <canvas id="canv" width="800px" height="800px"> 你若能看到这句话说明你浏览器不支持canvas! </canvas></body><script type="text/javascript"> var canv = document.getElementById("canv"); //获取2d上下文 var ctx = canv.getContext("2d"); var image = new Image(); image.src = "01.jpg"; image.onload = function(){ ctx.drawImage(image,0,0); var imgdata = ctx.getImageData(0,0,250,250); var pixels = imgdata.data;/* // 遍历每个像素并对 RGB 值进行取反for (var i=0, n=pixels.length; i<n; i+= 4){pixels[i] = 255-pixels[i]; //rpixels[i+1] = 255-pixels[i+1]; //gpixels[i+2] = 255-pixels[i+2]; //b} */ // 遍历每个像素并更改 RGB 值 for (var i=0, n=pixels.length; i<n; i+= 4){ var grayscale = pixels[i]*.3+pixels[i+1]*.59+pixels[i+2]*.11; //灰度处理 pixels[i ] = grayscale; // r pixels[i+1] = grayscale; // g pixels[i+2] = grayscale; // b } // 在指定位置进行像素重绘 ctx.putImageData(imgdata, 250, 0);}; </script>7.小动画
动画原理：先绘制一张图片drawImage(img,x,y,80,80);时刻更改图片的坐标x，y来使图片不断移动。
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>动画</title></head><body><canvas id="cav" width="500" height="500" ></canvas><input type="button" value="stop" onclick="stop()"><script> // 设置绘图环境 var cav = document.getElementById("cav"); var cxt=cav.getContext('2d'); //初始位置 var x=5; var y=5; // 创建绘图对象,并且画出来 var img =new Image(); img.src='/images/loading.gif' data-original="logo.png"; draw(); function draw() { //清除上一帧动画 cxt.clearRect(0,0,500,500); //十分重要 x+=5; y+=5; cxt.drawImage(img,x,y,80,80); } //设定动画，时间间隔100毫秒 var time = setInterval(draw,100); function stop(){ clearInterval(time); }</script></body></html>倘若我们不清除上一次绘制的结果效果会怎样呢？那就注释掉cxt.clearRect(0,0,500,500);试一试。
function draw() { //清除上一帧动画 //注释掉啦 cxt.clearRect(0,0,500,500); //十分重要 x+=5; y+=5; cxt.drawImage(img,x,y,80,80); }效果将连续出现一叠绘制的图片：
8.拖拽原理+canvas实现简易画板
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <style> #canvas{cursor:default;} #red{background:red; width:30px;height: 27px} #blue{background:blue; width:30px;height: 27px} #yellow{background:yellow; width:30px;height: 27px} #white{background:white; width:30px;height: 27px} #zi{background:#8B026B; width:30px;height: 27px} </style> </head> <body> <canvas id="canvas" width="600" height="400"> </canvas> <br><label>画笔颜色：</label> <input type="button" id="red" onclick="linecolor='red'"> <input type="button" id="blue" onclick="linecolor='blue'"> <input type="button" id="yellow" onclick="linecolor='yellow'"> <input type="button" id="white" onclick="linecolor='white'"> <input type="button" id="zi" onclick="linecolor='#8B026B'"> <label>画笔宽度：</label> <select id="sel"> <option value="4">4</option> <option value="8">8</option> <option value="16">16</option> <option value="30">30</option> </select> <input type="button" value="生成图片" onclick="toImg()"><br> <img id="image" src='/images/loading.gif' data-original="" width="500px" height="200px"> <script type="text/javascript"> //下拉画笔宽度 window.onload=function(){ var huabi=document.getElementById("sel"); huabi.onchange=function(){ linw=huabi.value; }; //linw=huabi; }; var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); //画一个黑色矩形 ctx.fill; ctx.fillRect(0,0,600,400); //按下标记 var onoff=false; var oldx=-10; var oldy=-10; //设置颜色默认为白色 var linecolor="white"; //画笔宽度 var linw=5;//鼠标移动事件，事件绑定canvas.addEventListener("mousedown",down,false); canvas.addEventListener("mousemove",draw,true); canvas.addEventListener("mouseup",up,false); function down(event){ onoff=true; oldx=event.pageX; oldy=event.pageY; } function up(){ onoff=false; } function draw(event){ if(onoff==true) { var newx=event.pageX; var newy=event.pageY; ctx.beginPath(); ctx.moveTo(oldx,oldy); ctx.lineTo(newx,newy); ctx.strokeStyle=linecolor; ctx.lineWidth=linw; ctx.lineCap="round"; ctx.stroke(); oldx=newx; oldy=newy; } } function toImg(){ document.getElementById("image").src='/images/loading.gif' data-original=canvas.toDataURL("image/jpg"); } </script> </body> </html> 点我展开代码
效果：
内容很基础，各位见笑啦。
原标题：强大的canvas
关键词：
我知道了 