canvas教程

基本知识 context:一直觉得这个翻译成“上下文”真够蛋疼的，context是一个封装了很多绘图功能的对象，获取这个对象的方法是 var context =canvas.getContext("2d"); 也许这个2d勾起了大家的无限遐想，但是很遗憾的告诉你html5还只是个少女，不提供3d服务。 canvas元素绘制图像的时候有两种方法，分别是 context.fill()填充 contex

function draw21(id) {
            var canvas = document.getElementById(id)
          if (canvas == null)
                 return false;
             var context = canvas.getContext("2d");
            //实践表明在不设施fillStyle下的默认fillStyle=black
           context.fillRect(0, 0, 100, 100);
            //实践表明在不设施strokeStyle下的默认strokeStyle=black
           context.strokeRect(120, 0, 100, 100);

            //设置纯色
            context.fillStyle = "red";
             context.strokeStyle = "blue";
            context.fillRect(0, 120, 100, 100);
            context.strokeRect(120, 120, 100, 100);
 
            //设置透明度实践证明透明度值>0,<1值越低，越透明，值>=1时为纯色，值<=0时为完全透明
             context.fillStyle = "rgba(255,0,0,0.2)";
            context.strokeStyle = "rgba(255,0,0,0.2)";
            context.fillRect(240,0 , 100, 100);
            context.strokeRect(240, 120, 100, 100);
         }