第七课--H5画布var c1 = document.var ctx1 = c1.ctx1.ctx1.var c1 =

<canvas id="myCanvas1" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
    var c1 = document.getElementById("myCanvas1");
    var ctx1 = c1.getContext("2d");
    //颜色
    ctx1.fillStyle="#FF0000";
    ctx1.fillRect(0,0,150,75);
<script>
使用js来给画布渲染东西
看案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画布</title>
</head>
<body>
<canvas id="myCanvas1" width="200" height="100" style="border:1px solid #000000;"></canvas>
<canvas id="myCanvas2" width="200" height="100" style="border:1px solid #000000;"></canvas>
<canvas id="myCanvas3" width="200" height="100" style="border:1px solid #000000;"></canvas>
<canvas id="myCanvas4" width="900" height="900" style="border:1px solid #000000;"></canvas>

</body>
</html>
<script>
    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);
</script>