第七课--H5画布

    var c1 = document.getElementById("myCanvas1");
    var ctx1 = c1.getContext("2d");
    //颜色
    ctx1.fillStyle="#FF0000";
    ctx1.fillRect(0,0,150,75);

使用js来给画布渲染东西
看案例

    
    画布










    var c1 = document.getElementById("myCanvas1");
    var ctx1 = c1.getContext("2d");
    //颜色
    ctx1.fillStyle="#FF0000";
    ctx1.fillRect(0,0,150,75);
    //画线
    ctx1.moveTo(0,0);
    ctx1.lineTo(200,100);
    ctx1.stroke();
    //画圆
    ctx1.beginPath();
    ctx1.arc(95,50,40,0,2*Math.PI);
    ctx1.stroke();
    //文本
    ctx1.font="30px Arial";
    ctx1.fillText("Hello World1",10,50);
    ctx1.strokeText("Hello World2",10,50);
    var c2=document.getElementById("myCanvas2");
    var ctx2=c2.getContext("2d");

    // 创建渐变
    var grd=ctx2.createLinearGradient(0,0,200,0);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");

    // 填充渐变
    ctx2.fillStyle=grd;
    ctx2.fillRect(10,10,150,80);

    var c3=document.getElementById("myCanvas3");
    var ctx3=c3.getContext("2d");

    // 创建渐变
    var grd3=ctx3.createRadialGradient(75,50,5,90,60,100);
    grd3.addColorStop(0,"red");
    grd3.addColorStop(1,"yellow");

    // 填充渐变
    ctx3.fillStyle=grd3;
    ctx3.fillRect(10,10,150,80);

    var imgs = new Image();
    imgs.src = '../html/demo.png';

    var c4=document.getElementById("myCanvas4");
    var ctx4=c4.getContext("2d");
    // var img=document.getElementById("scream");
    ctx4.drawImage(imgs,10,10);