H5之 Canvas图形实现

最新推荐文章于 2023-09-22 23:16:21 发布

Zh.晨光

最新推荐文章于 2023-09-22 23:16:21 发布

阅读量2.2k

点赞数

分类专栏：前端技术道本自然文章标签： canvas 图形 WEB前端开发

本文链接：https://blog.csdn.net/zhangchen124/article/details/78486453

版权

道本自然同时被 2 个专栏收录

743 篇文章 39 订阅

订阅专栏

前端技术

260 篇文章 18 订阅

订阅专栏

视频课：https://edu.csdn.net/course/play/7621

<!DOCTYPE html>

<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       
       <canvas id="mycanvas" width="100" height="100">测试浏览器</canvas>
       
       <script language="JavaScript">
           //根据id，来得到网页上的画布元素对象
           var c=document.getElementById("mycanvas");
           var ctx=c.getContext("2d");//2d内容
           //1.预备;
           ctx.beginPath();
           //2.设置起点;,就是设置起点的(x,y)坐标
           ctx.moveTo(10,10);
           //3.移动到终点;
           ctx.lineTo(100,10);
           ctx.lineTo(10,100);
           ctx.lineTo(100,100);

           ctx.lineTo(10,10);
           //4.绘制轮廓;
           ctx.stroke();
       </script>
   </body>

</html>

图形效果：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       <script language="JavaScript">
           //定义一个函数,类似于java的方法
           function drawRect(){
               var c=document.getElementById("mycanvas2");
               var ctx=c.getContext("2d");
               //压缩代码
               ctx.fillStyle="yellow";//填充样式
               ctx.lineWidth=10;
               ctx.strokeStyle="blueviolet";
               ctx.strokeRect(20,20,50,100);
               ctx.fillRect(20,20,50,100);
               ctx.clearRect(30,30,30,20);
//               ctx.beginPath();
//               ctx.rect(10,10,100,50);//绘制矩形
//               ctx.stroke();
           }
           //把自定义的函数，加到load事件监听中
           //addEventLister在整个页面加载完毕去添加响应;
           window.addEventListener("load",drawRect,true);//js可以位于上方;
           //window.οnlοad=drawRect(); 这个还是js在下面
       </script>
       <canvas id="mycanvas2" width="500" height="500"></canvas>
   </body>
</html>

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       <script>
           function drawArc(){
               var c=document.getElementById("mycanvas3");
               var ctx=c.getContext("2d");
               ctx.beginPath();
               //起始度：弧度;这个地方不是度
               //PI 弧度=180度
               ctx.strokeStyle="red";//设置轮廓的样式
               ctx.arc(50,50,40,Math.PI/2,2*Math.PI,false);//绘制
               ctx.stroke();
           }
           window.addEventListener("load",drawArc,true);
       </script>
       <canvas id="mycanvas3" width="500" height="500"></canvas>
   </body>
</html>

Zh.晨光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
H5之 Canvas图形实现

测试浏览器 //根据id，来得到网页上的画布元素对象 var c=document.getElementById("mycanvas"); var ctx=c.getContext("2d");//2d内容 //1.预备; ctx.beginPath();
复制链接

扫一扫