首页 > 代码库 > Canvas

Canvas

2024-08-30 08:23:45   214人阅读

  1.Canvas绘制一个蓝色的矩形

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

</head>
<body>

    <canvas id="myCanvas" width="300" height="200"></canvas>

   <script type="text/javascript">
    var canvas=document.getElementById(‘myCanvas‘);
    var ctx=canvas.getContext(‘2d‘);
    ctx.fillStyle=‘#000099‘;
    ctx.fillRect(0,0,80,100);
    </script>
</body>
</html>

         显示技术分享

2.绘制基本的直线

   ①绘制直线

<body>
    <canvas id="myCanvas"></canvas>

   <script type="text/javascript">
       var canvas=document.getElementById("myCanvas");  //获取Canvas对象
       var ctx=canvas.getContext("2d");            //获取上下文对象
       ctx.beginPath();                             //开始一个新的绘制路径
       ctx.moveTo(10,10);                           //定义直线的起点坐标
       ctx.lineTo(200,10);                          //定义直线的终点坐标
       ctx.stroke();                                //沿着坐标点顺序的路径绘制直线
       ctx.closePath();                             //关闭当前的绘制路径
   </script>
</body>

       显示：技术分享

     ② 绘制二次曲线：

      是直线锥面的两腔被一平面所截而得的曲线。二次曲线由一个起点、一个终点和一个控制点决定，当控制点经过圆锥顶点时，曲线变成一个点、直线或者相交直线，当控制点不经过圆锥顶点时，曲线可能是圆、锥圆、双曲线或抛物线。     

<body>

<canvas id="myCanvas">您的浏览器不支持canvas标签</canvas>

<script type="text/javascript">
var canvas=document.getElementById(‘myCanvas‘);
if(canvas && canvas.getContext){                //判断Canvas对象是否为空    
    var ctx = canvas.getContext("2d");            //获取Canvas对象上下文    
    ctx.beginPath();                                //开始一个新的绘制路径
    ctx.moveTo(100,50);                            //定义直线的起点坐标为(100,50)
    ctx.quadraticCurveTo(100,15,300,30);        //设置二次曲线坐标
    ctx.stroke();                                    //绘制路径    
}
</script>

</body>

      判断Canvas对象是否为空：是因为有些浏览器对Canvas的支持不是很好，为了避免网页运行时出现错误，需要提前判断。

      显示：技术分享

     ③绘制贝赛尔曲线

     每一个顶点都有两个控制点，用于控制在该顶点

 

 

  

 

Canvas


联系
我们