HTML5中canvas的二次曲线用法

原创 2015年11月20日 11:35:59
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
        function draw2D(){
            var canvas=document.getElementById("canvas-fram");
            if(canvas==undefined){
                return ;
            }
            canvas.width=1000;  //设置画布的宽
            canvas.height=1000; //设置画布的高
            var context=canvas.getContext("2d");
            context.moveTo(50, 50);
            context.bezierCurveTo(50, 50,200,200,300,50);//绘制曲线,它是由三个坐标点组成,各个坐标点之间会绘制一个弧度
            /*
             bezierCurveTo(p1x,p1y,p2x,p2y,x,y)
             p1x:第一个控制点x坐标
             p1y:第一个控制点y坐标
             p2x:第二个控制点x坐标
             p2y:第二个控制点y坐标
             x:终点x坐标
             y:终点y坐标
             */
            context.stroke();
            context.quadraticCurveTo(300, 0, 400,0);//绘制二次曲线,它是由两个坐标点组成的曲线
            /*
            qpx1:二次曲线控制点x坐标
            qpy1:二次样条曲线控制点y坐标
            x:二次样条曲线终点x坐标
            y:二次样条曲线终点y坐标
            */
            context.stroke();
        }
    </script>
</head>
<body onload="draw2D()">
<canvas id="canvas-fram"></canvas>
</body>
</html>

效果图如下所示:


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

【Html5每日练习】canvas quadraticCurve二次曲线深入理解

今天在canvas看见两个方法用来绘制贝塞尔曲线,我觉得很好奇,就点开了参考手册的说明,但令我失望了,几乎什么也没有,只有那么一句话,贝塞尔曲线的数学原理超过了本参考页的范围。好吧,看来有些东西就得靠...

html5-canvas3-二次贝塞尔曲线和三次贝塞尔曲线以及canvas的渐变

以前不知道二次贝塞尔曲线和三次贝塞尔曲线,学习canvas时,canvas提供了两个方法来绘制这两条陌生的线。偶也是初次了解,不知道什么地方将来会用到,先分享了再说: 和以前一样,先建个canvas标...

HTML5:canvas基本属性与用法介绍

  • 2012年01月29日 15:06
  • 1.14MB
  • 下载

html5 canvas 贝赛尔曲线

  • 2012年07月31日 11:00
  • 123B
  • 下载

HTML5 canvas 图片切换/图片轮播 贝塞尔曲线缓动 3D效果 (之) : slicease.js

slicease.js是一个基于HTML5 canvas的3D图片切换动画,使用原生JS来书写,采用了闭包封装,MVC结构,拥有规范的事件机制、灵活的缓动函数、以及简明强大的配置,并且便于扩展。...

Html5 Canvas开发之画圆(时钟,贝塞尔曲线)和旋转缩放

1.时钟 window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContex...

HTML5实战—canvas绘图之贝塞尔曲线

1、二次贝塞尔曲线   quadraticCurveTo(cpx,cpy,x,y)  //cpx,cpy表示控制点的坐标, x,y表示终点坐标; 数学公式表示如下: 二次方贝兹曲线的路径由给定点...

HTML5画布Canvas线段、矩形、弧形及贝塞尔曲线等简单图形绘制

HTML5中最有意思的就是这个canvas了  通过它我们可以画自己想要的图形  它也是十分重要的技术  应用于游戏、图表等等  或者绘制各种酷炫的东西  这里给大家分享一个网站 传送门  ...

HTML5 JS Canvas利用贝塞尔曲线绘制圆角矩形

啥也不说,先上示例代码: 圆角矩形 您的浏览器不支持 HTML5 canvas 标签。 var c=document.getElementById("myCanvas"); var...

HTML5之CANVAS 用法示例汇总

Your browser does not support the canvas element. Your browser does not support the canvas element.Y...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5中canvas的二次曲线用法
举报原因:
原因补充:

(最多只允许输入30个字)