canvas小知识

清单 1. 绘制 canvas 矩形

 function drawRect(){
 var canvas = document.getElementById('canvas');
 if (canvas.getContext){
 var ctx = canvas.getContext('2d');  // 获取 2D 渲染上下文

 ctx.clearRect(0,0,300,200)  ;// 清除以（0,0）为左上坐标原点，300*200 矩形区域内所有像素
 ctx.fillStyle = '#00f';   // 设置矩形的填充属性，#00f 代表蓝色
 ctx.strokeStyle = '#f00';  // 设置矩形的线条颜色，#f00 代表红色
 ctx.fillRect(50,25,150,80); // 使用 fillStyle 填充一个 150*80 大小的矩形
 ctx.strokeRect(45,20, 160, 90);  // 以 strokeStype 属性为边的颜色绘制一个无填充矩形
     }
 } 

清单 2. 绘制 canvas 路径

 function draw(){
 var canvas = document.getElementById('canvas');
         if (canvas.getContext){
                 var ctx = canvas.getContext('2d');
 ctx.fillStyle = '#00f';
                 ctx.strokeStyle = '#f00';
                 ctx.beginPath();
 ctx.arc(75,75,30,0,Math.PI, false);  // 绘制一条半圆弧线
 ctx.closePath();    // 自动绘制一条直线来关闭弧线。若不调用此方法，将仅仅显示一条半圆弧
 ctx.fill();      // 可以尝试注释掉 fill 或者 stroke 函数，观察图形的变化
 ctx.stroke();
         }
 }
清单 3. 使用平移 / 旋转变形方法绘制复杂位图

 function drawPointCircle(){
 var canvas = document.getElementById('canvas');
         if (canvas.getContext){
                 var ctx = canvas.getContext('2d');
 ctx.translate(150,150);   // 将 canvas 的原点从 (0,0) 平移至（150,150）
 for (i=1;i<=2;i++){        // 绘制内外 2 层
 if ((i % 2) == 1) {ctx.fillStyle = '#00f';}
 else{ ctx.fillStyle = '#f00'; }
 ctx.save();             // 保持开始绘制每一层时的状态一致
 for (j=0;j<=i*6;j++){   // 每层生成点的数量
 ctx.rotate(Math.PI/(3*i));  // 绕当前原点将坐标系顺时针旋转 Math.Pi/(3*i) 度
                                 ctx.beginPath();
                                 ctx.arc(0,20*i,5,0,Math.PI*2,true);
 ctx.fill();         // 使用 fillType 值填充每个点
 }
 ctx.restore();
                 }
         }
 } 

清单 4. 实现简单滤镜效果

 function revertImage(){
 var canvas = document.getElementById('canvas');
 if (canvas.getContext){
 var context = canvas.getContext('2d');
 // 从指定的矩形区域获取 canvas 像素数组
 var imgdata = context.getImageData(100, 100, 100, 100);
 var pixels = imgdata.data; 

 // 遍历每个像素并对 RGB 值进行取反
 for (var i=0, n=pixels.length; i<n; i+= 4){
      pixels[i] = 255-pixels[i];
       pixels[i+1] = 255-pixels[i+1];
       pixels[i+2] = 255-pixels[i+2];
 }
 // 在指定位置进行像素重绘
 context.putImageData(imgdata, 100, 100);
         }
 } 

清单 5. 实现小弹力球动画

 <script type="text/javascript">
 var x=0,y=0,dx=2,dy=3,context2D;   // 小球从（0,0）开始移动，横向步长为 2，纵向步长为 3 

 function draw(){
 context2D.clearRect(0, 0, canvas.width, canvas.height);   // 清除整个 canvas 画面
 drawCircle(x, y);         // 使用自定义的画圆方法，在当前（x,y）坐标出画一个圆

 // 判断边界值，调整 dx/dy 以改变 x/y 坐标变化方向。
 if (x + dx > canvas.width || x + dx <) dx = -dx;
 if (y + dy > canvas.height || y + dy <) dy = -dy;
 x += dx;
 y += dy;
 } 

 window.onload = function (){
 var canvas = document.getElementById('canvas');
 context2D = canvas.getContext('2d');
 setInterval(draw, 20);     // 设置绘图周期为 20 毫秒
 }
 </script> 

清单 6. 实现 canvas 对方向键和鼠标点击事件的响应

 <script type="text/javascript">
 var g_x,g_y;    // 鼠标当前的坐标
 var g_pointx, g_pointy;   // 蓝色小球当前的坐标
         var canvas; 

 function drawCircle(x,y){    // 以鼠标当前位置为原点绘制一个蓝色小球
 var ctx = canvas.getContext('2d');
                 ctx.clearRect(0,0,300,300);
                 ctx.fillStyle = '#00f';
                 ctx.beginPath();
                 ctx.arc(x,y,20,0,Math.PI*2,true);
                 ctx.fill(); 

 g_pointx = x;
                 g_pointy = y
 } 

         function onMouseMove(evt) {
 // 获取鼠标在 canvas 中的坐标位置
 if (evt.layerX || evt.layerX == 0) { // FireFox
 g_x = evt.layerX;
 g_y = evt.layerY;
 }
                 document.getElementById("xinfo").innerHTML = g_x;
                 document.getElementById("yinfo").innerHTML = g_y;
         } 

         function onKeyPress(evt) {
 var dx = 3;  // 横向平移步长
                 var kbinfo = document.getElementById("kbinfo"); 

 if (evt.keyCode == 39){
                         kbinfo.innerHTML="right";
 if (g_x<300-dx) drawCircle(g_pointx+dx,g_pointy);
 document.getElementById("xinfo").innerHTML = g_pointx;
                 }else if (evt.keyCode == 37){
 kbinfo.innerHTML = "left";
                         if (g_x>dx) drawCircle(g_pointx-dx,g_pointy);
 document.getElementById("xinfo").innerHTML = g_pointx;
 }
 } 

 window.onload = function(){
 canvas = document.getElementById('canvas');
 // 增加 canvas 节点对鼠标单击，移动以及键盘事件的响应函数
 canvas.addEventListener('click', function(evt){drawCircle(g_x, g_y);} , false);
 canvas.addEventListener('mousemove', onMouseMove, false);
 canvas.addEventListener('keypress', onKeyPress, false);
 canvas.focus();  // 获得焦点之后，才能够对键盘事件进行捕获
 }
 </script>