【html5 教程】html5 canvas 详细使用教程

更新时间:2021-05-31    来源:css3教程    手机版     字体:

【www.bbyears.com--css3教程】

 

 代码如下

  

  <scripttype="text/javascript">

    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);

    }

    function draw22(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);

      context.clearRect(50, 50, 240, 120);

    }

    function draw23(id) {

      var canvas = document.getElementById(id);

      if (canvas == null) {

        return false;

      }

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

      var n = 0;

      //左侧1/4圆弧

      context.beginPath();

      context.arc(100, 150, 50, 0, Math.PI/2 , false);

      context.fillStyle = 'rgba(255,0,0,0.25)';

      context.fill();

      context.strokeStyle = 'rgba(255,0,0,0.25)'

      context.closePath();

      context.stroke();

      //右侧1/4圆弧

      context.beginPath();

      context.arc(300, 150, 50, 0, Math.PI/2 , false);

      context.fillStyle = 'rgba(255,0,0,0.25)';

      context.fill();

      context.strokeStyle = 'rgba(255,0,0,0.25)';

      context.closePath();

      context.stroke();

    }

    function draw0(id) {

      var canvas = document.getElementById(id);

      if (canvas == null) {

        return false;

      }

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

      context.beginPath();

      context.arc(200, 150, 100, 0, Math.PI * 2, true);

      //不关闭路径路径会一直保留下去,当然也可以利用这个特点做出意想不到的效果

      context.closePath();

      context.fillStyle = 'rgba(0,255,0,0.25)';

      context.fill();

    }

    function draw1(id) {

      var canvas = document.getElementById(id);

      if (canvas == null)

        return false;

      var context = canvas.getContext("2d");

      context.fillStyle = "#EEEEFF";

      context.fillRect(0, 0, 400, 300);

      var n = 0;

      var dx = 150;

      var dy = 150;

      var s = 100;

      context.beginPath();

      context.fillStyle = 'rgb(100,255,100)';

      context.strokeStyle = 'rgb(0,0,100)';

      var x = Math.sin(0);

      var y = Math.cos(0);

      var dig = Math.PI / 15 * 11;

      for (var i = 0; i <30; i++) {

        varx=Math.sin(i * dig);

        vary=Math.cos(i * dig);

        context.lineTo(dx + x * s, dy + y * s);

      }

      context.closePath();

      context.fill();

      context.stroke();

    }

    function draw2(id) {

      varcanvas=document.getElementById(id);

      if (canvas == null) {

        return false;

      }

      varcontext=canvas.getContext("2d");

      context.fillStyle="#EEEFF";

      context.fillRect(0, 0, 400, 300);

      varn=0;

      vardx=150;

      vardy=150;

      vars=100;

      context.beginPath();

      context.globalCompositeOperation='and';

      context.fillStyle='rgb(100,255,100)';

      varx=Math.sin(0);

      vary=Math.cos(0);

      vardig=Math.PI / 15 * 11;

      context.moveTo(dx, dy);

      for (vari=0; i < 30; i++) {

        varx=Math.sin(i * dig);

        vary=Math.cos(i * dig);

        context.bezierCurveTo(dx + x * s, dy + y * s - 100, dx + x * s + 100, dy + y * s, dx + x * s, dy + y * s);

      }

      context.closePath();

      context.fill();

      context.stroke();

    }

    function draw24(id) {

      varcanvas=document.getElementById(id);

      if (canvas == null) {

        return false;

      }

      varcontext=canvas.getContext("2d");

      context.moveTo(50, 50);

      context.bezierCurveTo(50, 50,150, 50, 150, 150);

      context.stroke();

      context.quadraticCurveTo(150, 250, 250, 250);

      context.stroke();

    }

    function draw25(id) {

      varcanvas=document.getElementById(id);

      if (canvas == null)

        return false;

      varcontext=canvas.getContext('2d');

      varg1=context.createLinearGradient(0, 0, 0, 300);

      g1.addColorStop(0, 'rgb(255,0,0)'); //红

      g1.addColorStop(0.5, 'rgb(0,255,0)');//绿

      g1.addColorStop(1, 'rgb(0,0,255)'); //蓝

      //可以把lg对象理解成GDI中线性brush

      context.fillStyle=g1;

      //再用这个brush来画正方形

      context.fillRect(0, 0, 400, 300);

    }

    function draw3(id) {

      varcanvas=document.getElementById(id);

      if (canvas == null)

        return false;

      varcontext=canvas.getContext('2d');

      varg1=context.createLinearGradient(0, 0, 0, 300); 

      g1.addColorStop(0,'rgb(255,255,0)');//浅绿

      g1.addColorStop(1,'rgb(0,255,255)');//浅蓝

      context.fillStyle=g1;

      context.fillRect(0, 0, 400, 300);

      varn=0;

      varg2=context.createLinearGradient(0, 0, 300, 0);

      g2.addColorStop(0, 'rgba(0,0,255,0.5)');//蓝色

      g2.addColorStop(1, 'rgba(255,0,0,0.5)');//红色

      for (vari=0; i < 10; i++) {

        context.beginPath();

        context.fillStyle=g2;

        context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);

        context.closePath();

        context.fill();

      }

    }

    function draw26(id) {

      //同一个圆心画球型

      /*varcanvas=document.getElementById(id);

      if (canvas == null)

        return false;

      varcontext=canvas.getContext('2d');

      varg1=context.createRadialGradient(200, 150, 0, 200, 150, 100);

      g1.addColorStop(0.1, 'rgb(255,0,0)');

      g1.addColorStop(1, 'rgb(50,0,0)');

      context.fillStyle=g1;

      context.beginPath();

      context.arc(200, 150, 100, 0, Math.PI * 2, true);

      context.closePath();

      context.fill();*/

      //不同圆心看径向渐变模型

      varcanvas=document.getElementById(id);

      if (canvas == null)

      return false;

      varcontext=canvas.getContext('2d');

      varg1=context.createRadialGradient(100, 150, 10, 300, 150, 50);

      g1.addColorStop(0.1, 'rgb(255,0,0)');

      g1.addColorStop(0.5, 'rgb(0,255,0)');

      g1.addColorStop(1, 'rgb(0,0,255)');

      context.fillStyle=g1;

      context.fillRect(0, 0, 400, 300);

    }

    function draw27(id) {

      varcanvas=document.getElementById(id);

      if (canvas == null)

        return false;

      varcontext=canvas.getContext('2d');

      context.shadowOffsetX=10;

      context.shadowOffsetY=10;

      context.shadowColor='rgba(100,100,100,0.5)';

      context.shadowBlur=1.5;

      context.fillStyle='rgba(255,0,0,0.5)';

      context.fillRect(100, 100, 200, 100);

    }

    function draw4(id) {

      varcanvas=document.getElementById(id);

      if (canvas == null)

        return false;

      varcontext=canvas.getContext('2d');

      varg1=context.createRadialGradient(400, 0, 0, 400, 0, 400);

      g1.addColorStop(0.1, 'rgb(255,255,0)');

      g1.addColorStop(0.3, 'rgb(255,0,255)');

      g1.addColorStop(1, 'rgb(0,255,255)');

      context.fillStyle=g1;

      context.fillRect(0, 0, 400, 300);

      varn=0;

//      varg2=context.createRadialGradient(250, 250, 0, 250, 250, 300);

//      g2.addColorStop(0.1, 'rgba(255,0,0,0.5)');

//      g2.addColorStop(0.7, 'rgba(255,255,0,0.5)');

//      g2.addColorStop(1, 'rgba(0,0,255,0.5)');

      for (vari=0; i < 10; i++) {

        varg2=context.createRadialGradient(i * 25, i * 25, 0, i * 25, i * 25, i * 10);

        g2.addColorStop(0.1, 'rgba(255,0,0,0.5)');

        g2.addColorStop(0.7, 'rgba(255,255,0,0.5)');

        g2.addColorStop(1, 'rgba(0,0,255,0.5)');

        context.beginPath();

        context.fillStyle=g2;

        context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);

        context.fill();

      }

    }

    function draw5(id) {

      varcanvas=document.getElementById(id);

      if (canvas == null)

        return false;

      varcontext=canvas.getContext("2d");

      context.save(); //保存了当前context的状态

      context.fillStyle="#EEEEFF";

      context.fillRect(0, 0, 400, 300);

      context.fillStyle="rgba(255,0,0,0.1)";

      //平移 缩放 旋转 1 2 3   

      context.translate(100, 100);

      context.scale(0.5, 0.5);

      context.rotate(Math.PI / 4);

      context.fillRect(0, 0, 100, 100);

      context.restore(); //恢复到刚刚保存的状态,保存恢复只能使用一次

      context.save(); //保存了当前context的状态

      context.fillStyle="rgba(255,0,0,0.2)";

      //平移 旋转 缩放 1 3 2

      context.translate(100, 100);

      context.rotate(Math.PI / 4);

      context.scale(0.5, 0.5);

      context.fillRect(0, 0, 100, 100);

      context.restore(); //恢复到刚刚保存的状态

      context.save(); //保存了当前context的状态

      context.fillStyle="rgba(255,0,0,0.3)";

      //缩放 平移 旋转 2 1 3

      context.scale(0.5, 0.5);

      context.translate(100, 100);

      context.rotate(Math.PI / 4);

      context.fillRect(0, 0, 100, 100);

      context.restore(); //恢复到刚刚保存的状态

      context.save(); //保存了当前context的状态

      context.fillStyle="rgba(255,0,0,0.4)";

      //缩放 旋转 平移 2 3 1

      context.scale(0.5, 0.5);

      context.rotate(Math.PI / 4);

      context.translate(100, 100);

      context.fillRect(0, 0, 100, 100);

      context.restore(); //恢复到刚刚保存的状态

      context.save(); //保存了当前context的状态

      context.fillStyle="rgba(255,0,0,0.5)";

      //旋转 平移 缩放 3 1 2

      context.rotate(Math.PI / 4);

      context.translate(100, 100);

      context.scale(0.5, 0.5);

      context.fillRect(0, 0, 100, 100);

      context.restore(); //恢复到刚刚保存的状态

      context.save(); //保存了当前context的状态

      context.fillStyle="rgba(255,0,0,1)";

      //旋转 缩放 平移  3 2 1

      context.rotate(Math.PI / 4);

      context.scale(0.5, 0.5);

      context.translate(100, 100);

      context.fillRect(0, 0, 100, 100);

      //实验表明应该移动的是坐标轴

      //实验表明缩放的是坐标轴比例

      //实验表明旋转的是坐标轴

      //综合上述,因此平移 缩放 旋转 三者的顺序不同都将画出不同的结果

    }

    function draw6(id) {

      varcanvas=document.getElementById(id);

      if (canvas == null)

        return false;

      varcontext=canvas.getContext('2d');

      context.fillStyle="#EEEEFF";

      context.fillRect(0, 0, 400, 300);

      //图形绘制

      context.translate(200, 50);

      context.fillStyle='rgba(255,0,0,0.25)';

      for (vari=0; i < 50; i++) {

        //实验表明translate、scale、rotate都是在原有的context属性上调整的

        context.translate(25, 25);

        context.scale(0.95, 0.95);

        context.rotate(Math.PI / 10);

        context.fillRect(0, 0, 100, 50);

      }

    }

    function draw7(id) {

      varcanvas=document.getElementById(id);

      varcontext=canvas.getContext("2d");

      context.fillStyle="#EEEEFF";

      context.fillRect(0, 0, 400, 300);

      //图形绘制

      context.translate(200, 50);

      for (vari=0; i < 50; i++) {

        context.translate(25, 25);

        context.scale(0.95, 0.95);

        context.rotate(Math.PI / 10);

        create5Star(context);

        context.fill();

      }

    }

    function draw8(id) {

      varcanvas=document.getElementById(id);

      if (canvas == null)

        return false;

      varcontext=canvas.getContext("2d");

      //context.beginPath();

      context.strokeStyle="rgb(250,0,0)";

      context.fillStyle="rgb(250,0,0)"

      //实验证明第一次lineTo的时候和moveTo功能一样

      context.lineTo(100, 100);

      //之后的lineTo会以上次lineTo的节点为开始

      context.lineTo(200, 200);

      context.lineTo(200, 100);

      context.moveTo(200, 50);

      context.lineTo(100,50);

      context.stroke();

    }

    function draw9(id) {

      varcanvas=document.getElementById(id);

      if (canvas == null)

        return false;

      varcontext=canvas.getContext("2d");

      //定义颜色

      var colors = ["red", "orange", "yellow", "green", "blue", "navy", "perple"];

      //定义线宽

      context.lineWidth=10;

      context.transform(1,0,0,1,100,0)

      //循环绘制圆弧

      for (vari=0; i < colors.length; i++) {

        //定义每次向下移动10个像素的变换矩阵

        context.transform(1, 0, 0, 1, 0, 10);

        //设定颜色

        context.strokeStyle=colors[i];

        context.beginPath();

        context.arc(50, 100, 100, 0, Math.PI, true);

        context.stroke();

      }

    }

    function draw10(id) {

      varcanvas=document.getElementById(id);

      if (canvas == null) {

        return false;

      }

      varcontext=canvas.getContext("2d");

      varoprtns=newArray(

      "source-over",

      "destination-over",

      "source-in",

      "destination-in",

      "source-out",

      "destination-out",

      "source-atop",

      "destination-atop",

      "lighter",

      "xor",    

      "copy"

      );

      vari=0;//组合效果编号

      //结合setinterval动态显示组合

      varinteral=setInterval(function () {

        if (i == 10) {

          i=0;

        }

        else {

          i++;

        }

        //每次重绘前清空

        context.clearRect(0,0,400,300)

        //蓝色矩形

        context.fillStyle="blue";

        context.fillRect(10, 10, 60, 60);

        //设置组合方式

        context.globalCompositeOperation=oprtns[i];

        //设置新图形(红色圆形)

        context.beginPath();

        context.fillStyle="red";

        context.arc(60, 60, 30, 0, Math.PI * 2, false);

        context.fill();

     }, 1000);

    }

    function create5Star(context) {

      varn=0;

      vardx=100;

      vardy=0;

      vars=50;

      //创建路径

      context.beginPath();

      context.fillStyle='rgba(255,0,0,0.5)';

      varx=Math.sin(0);

      vary=Math.cos(0);

      vardig=Math.PI / 5 * 4;

      for (vari=0; i < 5; i++) {

        varx=Math.sin(i * dig);

        vary=Math.cos(i * dig);

        context.lineTo(dx + x * s, dy + y * s);

      }

      context.closePath();

    }

    function draw11(id) {

      varcanvas=document.getElementById(id);

      if (canvas == null)

        return false;

      varcontext=canvas.getContext("2d");

      context.fillStyle="#EEEEFF";

      context.fillRect(0, 0, 400, 300);

      context.shadowOffsetX=10;

      context.shadowOffsetY=10;

      context.shadowColor='rgba(100,100,100,0.5)';

      context.shadowBlur=5;

      //图形绘制

      context.translate(0, 50);

      for (vari=0; i < 3; i++) {

        context.translate(50, 50);

        create5Star(context);

        context.fill();

      }

    }

    //drawImage(image,x,y)

    function draw28(id) {

      varimage=newImage();

      image.src="http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";

      varcanvas=document.getElementById(id);

      if (canvas == null)

        return false;

      varcontext=canvas.getContext("2d");

      context.fillStyle="#EEEEFF";

      context.fillRect(0, 0, 400, 300);

      image.onload=function() {

        context.drawImage(image,0,0);

      }

    }

    //drawImage(image,x,y,w,h)

    function draw12(id) {

      varimage=newImage();

      image.src="http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";

      varcanvas=document.getElementById(id);

      if (canvas == null)

        return false;

      varcontext=canvas.getContext("2d");

      context.fillStyle="#EEEEFF";

      context.fillRect(0, 0, 400, 300);

      image.onload=function() {

        context.drawImage(image, 50, 50, 300, 200);

      }

    }

    //drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)

    function draw13(id){

      varimage=newImage();

      image.src="http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";

      varcanvas=document.getElementById(id);

 

      if (canvas == null)

        return false;

      varcontext=canvas.getContext("2d");

      context.fillStyle="#EEEEFF";

 

      context.fillRect(0, 0, 400, 300);

      image.onload=function() {

        context.drawImage(image, 100, 100, 200, 150,50,50,300,200);//这里取的是实际尺寸

      }

    }

    function draw14(id) {

      //传统的平铺是用for循环来处理的,现在直接调用接口

      varimage=newImage();

      varcanvas=document.getElementById(id);

      if (canvas == null)

        return false;

      varcontext=canvas.getContext("2d");

      var type = ["no-repeat", "repeat-x", "repeat-y", "repeat"];

      vari=0;

      image.src="http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";

      image.onload=function() {

        varinterval=setInterval(function () {

          //每次转换平铺类型清空

          context.clearRect(0, 0, 400, 300);

          if (i >= 4) {

            i = 0;

          }

          var ptrn = context.createPattern(image, type[i]);

          context.fillStyle = ptrn;

          context.fillRect(0, 0, 400, 300);

          i++;

        }, 1000);

      };

    }

    //图像裁剪

    function draw15(id) {

      var canvas = document.getElementById(id);

      if (canvas == null)

        return false;

      var context = canvas.getContext("2d");

      context.fillStyle = "black";

      context.fillRect(0, 0, 400, 300);

      image = new Image();

      image.onload = function () {

        drawImg(context,image);

      }

      image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png"

    }

    function drawImg(context, image) {

      //圆形裁剪区

      //createCircleClip(context)

      //星形裁剪区

      create5StarClip(context);

      context.drawImage(image,0,0);

    }

    function createCircleClip(context) {

      context.beginPath();

      context.arc(200, 150, 100, 0, Math.PI * 2, true);

      context.closePath();

      context.clip();

    }

    function create5StarClip(context) {

      var n = 0;

      var dx = 200;

      var dy = 135;

      var s = 150;

      context.beginPath();

      var x = Math.sin(0);

      var y = Math.cos(0);

      var dig = Math.PI / 5 * 4;

      for (var i = 0; i <5; i++) {

        varx=Math.sin(i * dig);

        vary=Math.cos(i * dig);

        context.lineTo(dx + x * s, dy + y * s);

      }

      context.closePath();

      context.clip();

    }

    function draw16(id) {

      varcanvas=document.getElementById(id);

      if (canvas == null)

        return false;

      varcontext=canvas.getContext("2d");

      context.fillStyle='red'

      //在右下角画一个正方形

      context.fillRect(250,250,150,50);

      varimage=newImage();

      image.src="http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";

      image.onload=function() {

        //在左上角画一幅图片

        context.drawImage(image, 0, 0,200,200);

        //实验证明imagedata取的是canvas所在范围画的图形,不止是图片

        //不会取该区域内是空白的canvas的像素

        varimagedata=context.getImageData(0, 0, 400, 300);

        //修改imagedata

        for (vari=0,n=imagedata.data.length; i < n; i += 4) {

          imagedata.data[i + 0] = 255 - imagedata.data[i + 0]; //red;

          imagedata.data[i + 1] = 255 - imagedata.data[i + 1]; //green

          imagedata.data[i + 2] = 255 - imagedata.data[i + 2]; //blue

          //imagedata.data[i + 3] = 255 - imagedata.data[i + 3]; //a

        }

        context.putImageData(imagedata,0 ,0,100,100,300,200);

      }

    }

    function draw17(id) {

      varcanvas=document.getElementById(id);

      if (canvas == null)

        return false;

      varcontext=canvas.getContext("2d");

      context.fillStyle="#EEEEFF";

      context.fillRect(0,0,400,300);

      context.fillStyle="#00f";

      context.font="italic 30px sans-serif";

      context.textBaseline='top';

      //填充字符串

      vartxt="fill示例文字"

      context.fillText(txt, 0, 0);

      varlength=context.measureText(txt);

      context.fillText("长" + length.width + "px", 0, 50);

      context.font="bolid 30px sans-serif";

      txt="stroke示例文字";

      length=context.measureText(txt);

      context.strokeText(txt,0,100);

      context.fillText("长" + length.width + "px", 0, 150);

    }

    function draw18(id) {

      varcanvas=document.getElementById(id);

      if (canvas == null)

        return false;

      varcontext=canvas.getContext("2d");

      context.fillStyle="red";

      context.save(); //保存了当前context的状态

      context.fillStyle="black";

      context.fillRect(0, 0, 100, 100);

      context.restore();//恢复到刚刚保存的状态

      context.fillRect(0,120,100,100);

    }

    function draw19(id) {

      varcanvas=document.getElementById(id);

      if (canvas == null)

        return false;

      varcontext=canvas.getContext("2d");

      context.fillStyle="rgb(0,0,225)";

      context.fillRect(0, 0, canvas.width, canvas.height);

      context.fillStyle="rgb(255,255,0)";

      context.fillRect(10, 20, 50, 50);

      //把图像保存到新的窗口

      varw=window.open(canvas.toDataURL("http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png"),"smallwin","width=400,height=350");

    }

    function draw20(id) {

      varcanvas=document.getElementById(id);

      if (canvas == null)

        return false;

      varcontext=canvas.getContext("2d");

      varinteral=setInterval(function () {

        move(context);

      }, 1);

    }

   varx=100;//矩形开始坐标

    vary=100;//矩形结束坐标

    varmx=0;//0右1左

    varmy=0; //0下1上

    varml=1;//每次移动长度

    varw=20;//矩形宽度

    varh=20;//矩形高度

    varcw=400;//canvas宽度

    varch=300; //canvas高度

    function move(context) {

      context.clearRect(0, 0, 400, 300);

      context.fillStyle="#EEEEFF";

      context.fillRect(0, 0, 400, 300);

      context.fillStyle="red";

      context.fillRect(x, y, w, h);   

      if (mx == 0) {

        x= x + ml;

        if (x >= cw-w) {

          mx = 1;

        }

      }

      else {

        x = x - ml;

        if (x <= 0) {

          mx = 0;

        }

      }

      if (my == 0) {

        y = y + ml;

        if (y >= ch-h) {

          my = 1;

        }

      }

      else {

        y = y - ml;

        if (y <= 0) {

          my = 0;

        }

      }

    }

    window.onload = function () {

      draw21("canvas21");

      draw22("canvas22");

      draw23("canvas23");

      draw24("canvas24");

      draw25("canvas25");

      draw26("canvas26");

      draw27("canvas27");

      draw28("canvas28");

      draw0("canvas0");

      draw1("canvas1");

      draw2("canvas2");

      draw3("canvas3");

      draw4("canvas4");

      draw5("canvas5");

      draw6("canvas6");

      draw8("canvas8");

      draw7("canvas7");

      draw9("canvas9");

      draw10("canvas10");

      draw11("canvas11");

      draw12("canvas12");

      draw13("canvas13");

      draw14("canvas14");

      draw15("canvas15");

      draw16("canvas16");

      draw17("canvas17");

      draw18("canvas18");

      draw19("canvas19");

      draw20("canvas20");

    }

  </script>

  

画矩形

  

清除矩形

  

绘制路径

  

画圆()

  

画线test(lineTo moveTo)

  

画线demo(lineTo moveTo)

  

贝塞尔曲线test(bezierCurveTo)

  

贝塞尔曲线demo(bezierCurveTo)

  

线性test(createLinearGradient addColorStop)

  

线性demo(createLinearGradient addColorStop)

  

发散test(createRadialGradient)

  

发散demo(createRadialGradient)

  

平移 test(translate)缩放(scale) 旋转(rotate)

  

平移 demo(translate)缩放(scale) 旋转(rotate)

  

坐标与路径的结合使用

  

矩阵变换

  

图形组合叠加(globalCompositeOperation)

  

给图像绘制阴影test shadowOffsetX(阴影的横向位移量) shadowOffsetY(盈盈的纵向位移量) shadowColor(阴影的颜色) shadowBlur(阴影的模糊范围)

  

给图像绘制阴影demo shadowOffsetX(阴影的横向位移量) shadowOffsetY(盈盈的纵向位移量) shadowColor(阴影的颜色) shadowBlur(阴影的模糊范围)

  

绘制图像drawImage(image,x,y)

  

绘制图像drawImage(image,x,y,w,h)

  

绘制局部图像drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)

  

图像平铺

  

图像裁剪clip

  

像素处理getImageData

  

绘制文字fillText strokeText

  

绘图状态的保存save与恢复restore

  

保存文件canvas.toDataURL

  

简单动画

 

本文来源:http://www.bbyears.com/css/120927.html