HTML5 Canvas Detailed Tutorial

Don’t say, please see code

   Function Draw21 (ID) { Var canvas = document.getlementBYID (ID) if (canvas == null) Return false; var context = canvas.getContext ("2D"); // Practice Indicates the default FillStyle = Black Context.FillRect under the unplan fillstyle under the failstyle , 0, 100, 100); // Practice Indicates the default strokestyle = Black Context.StrokeEut (120, 0, 100, 100); // set solid color context.FillStyle = "red"; context.StrokeStyle = "blue"; context.FillRect (0, 120, 100, 100); context.Strokeect (120, 120, 100, 100); // Set transparency practice proves transparency value> 0,  = 1 is solid color The value  0,  = 1 is solid color, value  = 4) {i = 0;} var PTRN = context.createpattern (Image, Type [i]); context.FillStyle = Ptrn;Context.FillRect (0, 0, 400, 300); i ++;}, 1000);};} // Image Crop Function Draw15 (ID) {var canvas = Document.GtelementByID (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"} "{// circular cropped area / / createcircLip (Context) / / Star Cutting Area Create5starclip (Context); Context.drawImage (Image, 0, 0);} Function CreateCircLip (Context.BeginPath (); Context.arc (200, 150, 100, 0, Math.pi * 2, True; context.closepath (); context.clip ();} function crete5starclip (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  = CW-W) {mx = 1;}} else {x = x - ml; if (x  = ch-h) {MY = 1;}} else {y = y - ml; if (Y   <=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++) {
        var x = Math.sin(i * dig);
        var y = Math.cos(i * dig);
        context.lineTo(dx + x * s, dy + y * s);
      }
      context.closePath();
      context.fill();
      context.stroke();
    }
    function draw2(id) {
      var canvas = document.getElementById(id);
      if (canvas == null) {
        return false;
      }
      var context = canvas.getContext("2d");
      context.fillStyle = "#EEEFF";
      context.fillRect(0, 0, 400, 300);
      var n = 0;
      var dx = 150;
      var dy = 150;
      var s = 100;
      context.beginPath();
      context.globalCompositeOperation = 'and';
      context.fillStyle = 'rgb(100,255,100)';
      var x = Math.sin(0);
      var y = Math.cos(0);
      var dig = Math.PI / 15 * 11;
      context.moveTo(dx, dy);
      for (var i = 0; i < 30; i++) {
        var x = Math.sin(i * dig);
        var y = 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) {
      var canvas = document.getElementById(id);
      if (canvas == null) {
        return false;
      }
      var context = 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) {
      var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = canvas.getContext('2d');
      var g1 = 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) {
      var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = canvas.getContext('2d');
      var g1 = 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);
      var n = 0;
      var g2 = 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 (var i = 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) {
      //同一个圆心画球型
      /*var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = canvas.getContext('2d');
      var g1 = 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();*/
      //不同圆心看径向渐变模型
      var canvas = document.getElementById(id);
      if (canvas == null)
      return false;
      var context = canvas.getContext('2d');
      var g1 = 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) {
      var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = 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) {
      var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = canvas.getContext('2d');
      var g1 = 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);
      var n = 0;
//      var g2 = 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 (var i = 0; i < 10; i++) {
        var g2 = 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) {
      var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = 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) {
      var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = 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 (var i = 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) {
      var canvas = document.getElementById(id);
      var context = canvas.getContext("2d");
      context.fillStyle = "#EEEEFF";
      context.fillRect(0, 0, 400, 300);
      //图形绘制
      context.translate(200, 50);
      for (var i = 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) {
      var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = 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) {
      var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = canvas.getContext("2d");
      //定义颜色
      var colors = ["red", "orange", "yellow", "green", "blue", "navy", "perple"];
      //定义线宽
      context.lineWidth = 10;
      context.transform(1,0,0,1,100,0)
      //循环绘制圆弧
      for (var i = 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) {
      var canvas = document.getElementById(id);
      if (canvas == null) {
        return false;
      }
      var context = canvas.getContext("2d");
      var oprtns = new Array(
      "source-over",
      "destination-over",
      "source-in",
      "destination-in",
      "source-out",
      "destination-out",
      "source-atop",
      "destination-atop",
      "lighter",
      "xor",     
      "copy"
      );
      var i = 0;//组合效果编号
      //结合setinterval动态显示组合
      var interal = 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) {
      var n = 0;
      var dx = 100;
      var dy = 0;
      var s = 50;
      //创建路径
      context.beginPath();
      context.fillStyle = 'rgba(255,0,0,0.5)';
      var x = Math.sin(0);
      var y = Math.cos(0);
      var dig = Math.PI / 5 * 4;
      for (var i = 0; i < 5; i++) {
        var x = Math.sin(i * dig);
        var y = Math.cos(i * dig);
        context.lineTo(dx + x * s, dy + y * s);
      }
      context.closePath();
    }
    function draw11(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);
      context.shadowOffsetX = 10;
      context.shadowOffsetY = 10;
      context.shadowColor = 'rgba(100,100,100,0.5)';
      context.shadowBlur =5;
      //图形绘制
      context.translate(0, 50);
      for (var i = 0; i  < 5; i++) {
        var x = Math.sin(i * dig);
        var y = Math.cos(i * dig);
        context.lineTo(dx + x * s, dy + y * s);
      }
      context.closePath();
      context.clip();
    }
    function draw16(id) {
      var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = canvas.getContext("2d");
      context.fillStyle = 'red'
      //在右下角画一个正方形
      context.fillRect(250,250,150,50);
      var image = new Image();
      image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";
      image.onload = function () {
        //在左上角画一幅图片
        context.drawImage(image, 0, 0,200,200);
        //实验证明imagedata取的是canvas所在范围画的图形,不止是图片
        //不会取该区域内是空白的canvas的像素
        var imagedata = context.getImageData(0, 0, 400, 300);
        //修改imagedata
        for (var i = 0, n = imagedata.data.length; i   <= 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");
    }
     
Clear rectangular

Drawing path

draw circle ()
Picture of line TEST (LINETO MOVETO)

Bezier Curve Test (Beziercurveto)

Bezier Curve Demo (Beziercurveto)

Linear DEMO (CreateLineargradient AddColorstop)

Dissatis TEST (CreateradialGradient)

Dissatis DEMO (CreateradialGradient)

Translation Test Zoom (SCALE) Rotation (Rotate)

SCALE Rotation (rotate)

coordinates The combination of path

Graphic combined superimposed (GL

to draw the shadow Test ShadowoffSetX (Transverse Lift) ShadowoffSenscil (Yingying Longitudinal Displacement) ShadowColor Color) Shadowblur (shaded blurred range)

Draw shadow Demo ShadowoffSetX (transverse displacement amount) Shadowoffsety (Yingying) Longitudinal displacement) ShadowColor (shaded color) shadowblur (shaded blurred range)

Draw Image DrawiMage (image, x, Y)
Draw Image DrawImage (Image, X, Y, W, H)

Drawing partial images DrawImage (Image, SX, SY, SW, SH, DX, DY, DW, DH)

Image crop Clip

Drawing text FillText StrokeText

DrawingSave Save and Restore Restore

Save file canvas.todataURL

All of this article, I hope this paper can bring certain help to everyone's learning or work, and I hope to support Tumi cloud!

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment