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-canvas3-二次贝塞尔曲线和三次贝塞尔曲线以及canvas的渐变

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

一次二次三次bezier曲线的计算方式及demo演示

前言假如大家有看过最新的css3动画特性,相比对cube-bezier这个动画设置有印象,假如又有看过svg的path,那么想必对bezier曲线这个路径如何设置也会感兴趣。至于bezier的理论,本...
  • cdnight
  • cdnight
  • 2015年09月16日 15:14
  • 3790

Html5系列(二十三) canvas高级贝塞尔曲线运动动画

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1...
  • dhdhxgx
  • dhdhxgx
  • 2015年04月16日 23:05
  • 5034

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

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

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

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

html5 canvas 贝赛尔曲线

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

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

1.时钟 window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContex...
  • Tsangyang
  • Tsangyang
  • 2012年11月17日 03:31
  • 3251

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

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

Html5 canvas学习2-圆 贝塞尔曲线

1.画一个圆弧arc(x,y,r,start,stop) 参数分别为: 圆心x坐标, 圆心y坐标, 圆的半径r , 开始角度, 结束角度 var c = document.getElementById...
  • u012426959
  • u012426959
  • 2017年12月20日 09:47
  • 139

HTML5之4__Canvas API: 绘制曲线、变换

HTML5 开发 起点之一就是 Canvas, 通过它可以动态生成和展示图形、图表、图像以及动画.  在Canvas 出现之前,开发人员若要在浏览器中使用绘图API, 只能使用 Adobe 的Flas...
  • aduovip
  • aduovip
  • 2015年05月07日 12:18
  • 2705
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5中canvas的二次曲线用法
举报原因:
原因补充:

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