老师,看一下

来源:3-11 编程练习

慕函数3468989

2018-11-23 14:34:21

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>canvas</title>

    <style>

        canvas{background-color:lightblue;}

    </style>

</head>

<body>

    <canvas id="canvas" width="800" height="800">

        您的浏览器不支持canvas

    </canvas>

    

    <script>

     var canvas=document.getElementById('canvas');

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

     cts.moveTo(300,50);

     cts.lineTo(373,185);

     cts.moveTo(444,187);

     cts.lineTo(517,50);

     cts.lineWidth='8';

     cts.strokeStyle='#ffc019';

     cts.stroke();

     cts.lineWidth='1';

     cts.beginPath();

     cts.fillStyle='#ffdab9'

     cts.fillRect(300,187,217,135);

      cts.fillStyle='#000000';

      cts.arc(358,240,16,0,2*Math.PI);

      cts.arc(459,240,16,0,2*Math.PI);

       cts.fill();

      cts.fillStyle='red';

   cts.fillRect(372,270,70,30);

 cts.beginPath();

  cts.fillStyle='yellow';

 cts.fillRect(270,212,30,55);

  cts.fillRect(517,212,30,55);

  cts.fillStyle='#ffb6c1';

  cts.fillRect(336,323,146,202);

  cts.fillStyle='#20b2aa';

   cts.fillRect(120,388,216,33);

   cts.fillRect(483,388,216,33);

   cts.fillRect(357,525,30,200);

    cts.fillRect(430,525,30,200);

      

</script>

</body>


</html>

 


写回答

1回答

好帮手慕星星

2018-11-23

经测试代码实现的效果没有问题,继续加油!

0

0 学习 · 4826 问题

查看课程

相似问题