JS画布的基本使用

最新推荐文章于 2024-04-03 12:12:21 发布

lcatake

最新推荐文章于 2024-04-03 12:12:21 发布

阅读量189

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/lcatake/article/details/132600983

版权

直线

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           #myname{
           border: 1px solid red;

           /* background: linear-gradient(to right, skyblue, pink); */
           /* background-color: greenyellow; */
           }
       </style>
   </head>

   </body>
<script>
   var name_1=document.getElementById("myname");
   var grd1=name_1.getContext("2d");
   var grd1_1=grd1.createLinearGradient(0,0,200,90);
   // grd1_1.addColorStop(0,"#FF0000");
   // grd1_1.addColorStop(1,"#00FF00");
   grd1_1.addColorStop(0,"skyblue");
   grd1_1.addColorStop(1,"pink");
   grd1.fillStyle=grd1_1;
   grd1.fillRect(0,0,200,90);

var name1=name_1.getContext("2d");

           name1.moveTo(10,10);
           name1.lineTo(10,90);
           name1.stroke();

               name1.moveTo(10,45);
               name1.lineTo(50,45);
               name1.stroke();

               name1.moveTo(50,10);
               name1.lineTo(50,90);
               name1.stroke();

   var name1_2=name_1.getContext("2d");

       name1_2.moveTo(70,20);
       name1_2.lineTo(120,20);
       name1_2.lineTo(70,80);
       name1_2.lineTo(120,80);
       name1_2.stroke()


       var name1_3=name_1.getContext("2d");

                   name1_3.moveTo(140,10);
                   name1_3.lineTo(140,90);
                   name1_3.stroke();

                       name1_3.moveTo(140,45);
                       name1_3.lineTo(180,45);
                       name1_3.stroke();

                       name1_3.moveTo(180,10);
                       name1_3.lineTo(180,90);
                       name1_3.stroke();

</script>

</html>

圆        var c=document.getElementById("myCanvas");
       var cxt=c.getContext("2d");
       cxt.fillStyle="black";
       cxt.beginPath();
       cxt.arc(10,10,5,0,Math.PI*2,false);
       cxt.closePath();
       cxt.fill();