请选择 进入手机版 | 继续访问电脑版

HTML5星空

HTML5星空 首页 HTML5教程 Canvas 查看内容

HTML5 Canvas 绘制贝塞尔曲线 Bezier and quadratic curves

2013-10-2 11:46| 发布者: admin| 查看: 1655| 评论: 0

摘要: 贝塞尔曲线:它可以是二次和三次方的形式,一般用于绘制复杂而有规律的形状。方法:quadraticCurveTo(cp1x,cp1y,x,y)bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)参数x和y是终点坐标,cp1x和cp1y是第一个控制点的坐标,c ...

贝塞尔曲线 :它可以是二次和三次方的形式,一般用于绘制复杂而有规律的形状。

方法:

quadraticCurveTo(cp1x, cp1y, x, y) 

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

 

参数 和 是终点坐标,cp1x 和 cp1y 是第一个控制点的坐标,cp2x 和 cp2y 是第二个的。 

用贝塞尔曲线绘制聊天气泡

说明

用贝塞尔曲线绘制聊天气泡

 

代码

<html>

<head>

<!--[if IE]>

<script type="text/javascriptsrc="excanvas.js"></script>

<script type="text/javascriptsrc="excanvas.compiled.js"></script>

<![endif]-->

<script type="text/javascript">

 function draw() {

      var canvas = document.getElementById("cv"); 

      if (canvas.getContext) { 

           var ctx = canvas.getContext("2d");

           ctx.moveTo(75,25); 

           ctx.quadraticCurveTo(25,25,25,62.5); 

           ctx.quadraticCurveTo(25,100,50,100); 

           ctx.quadraticCurveTo(50,120,30,125); 

           ctx.quadraticCurveTo(60,120,65,100); 

           ctx.quadraticCurveTo(125,100,125,62.5); 

           ctx.quadraticCurveTo(125,25,75,25); 

           ctx.stroke();

       }  

    }   

 </script>

 <title>用贝塞尔曲线绘制聊天气泡</title>

 </head>

<body onload="draw();" > 

    <canvas id="cv" width="150" height="150">

    </canvas>

</body>

</html>

 

效果

用贝塞尔曲线绘制爱心

说明

用贝塞尔曲线绘制爱心

 

代码

<html>

  <head>

<!--[if IE]>

<script type="text/javascriptsrc="excanvas.js"></script>

<script type="text/javascriptsrc="excanvas.compiled.js"></script>

<![endif]-->

  <script type="text/javascript">

   function draw() {

      var canvas = document.getElementById("cv"); 

      if (canvas.getContext) { 

           var ctx = canvas.getContext("2d");

           ctx.beginPath(); 

           ctx.moveTo(75,40); 

           ctx.bezierCurveTo(75,37,70,25,50,25); 

           ctx.bezierCurveTo(20,25,20,62.5,20,62.5); 

           ctx.bezierCurveTo(20,80,40,102,75,120); 

           ctx.bezierCurveTo(110,102,130,80,130,62.5); 

           ctx.bezierCurveTo(130,62.5,130,25,100,25); 

           ctx.bezierCurveTo(85,25,75,37,75,40); 

           ctx.fill();

       }  

    }   

    </script>

    <title>用贝塞尔曲线绘制爱心</title>

  </head>

  <body onload="draw();" > 

      <canvas id="cv" width="150" height="150">

      </canvas>

  </body>

</html>

 

效果

绘制圆角矩形(自定义方法)

function roundedRect(ctx,x,y,width,height,radius){

  ctx.beginPath();

  ctx.moveTo(x,y+radius);

  ctx.lineTo(x,y+height-radius);

  ctx.quadraticCurveTo(x,y+height,x+radius,y+height);

  ctx.lineTo(x+width-radius,y+height);

  ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);

  ctx.lineTo(x+width,y+radius);

  ctx.quadraticCurveTo(x+width,y,x+width-radius,y);

  ctx.lineTo(x+radius,y);

  ctx.quadraticCurveTo(x,y,x,y+radius);

  ctx.stroke();

}

 


鲜花

握手

雷人

路过

鸡蛋

相关阅读

快讯
发布主题

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2017-9-25 08:43 , Processed in 0.082886 second(s), 28 queries .

返回顶部