<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script type="text/javascript">

            function draw(id){

                var canvas = document.getElementById(id);

                if(canvas == null){

                    return false;

                }

                var context = canvas.getContext('2d');

                context.fillStyle = "#eeeeff";

                context.fillRect(0,0,400,300);

                var dx = 150;

                var dy = 150;

                var s = 100;

                context.beginPath();

                context.globalCompositeOperation = 'and';

                context.fillStyle = 'rgb(100,255,100)';

                context.strokeStyle = 'rgb(0,0,100)';

                var x = Math.sin(0);

                var y = Math.cos(0);

                var dig = Math.PI/15*11;

                for(var i=0;i<30;i++){

                    var x = Math.sin(i*dig);

                    var y = Math.cos(i*dig);

                    context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s);

                }

                context.closePath();

                context.fill();

                context.stroke();

            }

        </script>

    </head>

    <body onload="draw('canvas');">

        <canvas id="canvas" width="400" height="300"></canvas>

    </body>

</html>

canvas贝济埃曲线的更多相关文章

  1. HTML5系列五（Canvas详述）

    写在前面 闲来无事的时候会来一场一个人说走就走的旅行或者宅家里系统性的看些技术方面的书,最近在看<html5与css3权威指南>,这本书挺适合初学前端的人,虽然对于我来说只是温习相关的知识 ...

  2. Canvas入门（1）：绘制矩形、圆、直线、曲线等基本图形

    来源:http://www.ido321.com/968.html 一.Canvas的基础知识 Canvas是HTML 5中新增的元素,专门用于绘制图形.canvas元素就相当于一块“画布”,一块无色 ...

  3. 【转】HTML CANVAS

    https://blog.csdn.net/u012468376/article/details/73350998 学习HTML5 Canvas这一篇文章就够了 2017年06月16日 20:57:4 ...

  4. Canvas中绘制贝塞尔曲线

    ① 什么是贝塞尔曲线? 在数学的数值分析领域中,贝济埃曲线(英语:Bézier curve,亦作“贝塞尔”)是计算机图形学中相当重要的参数曲线.更高维度的广泛化贝济埃曲线就称作贝济埃曲面,其中贝济埃三 ...

  5. javascript -- canvas绘制曲线

    绘制曲线有几种思路: 1.通过quadraticCurveTo(controlX, controlY, endX, endY)方法来绘制二次曲线 2.通过bezierCurveTo(controlX1 ...

  6. HTML5 canvas 学习

    一.canvas简介 ​ <canvas> 是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素.它可以用来制作照片集或者制作简单(也不是 ...

  7. 第154天：canvas基础（一）

    一.canvas简介 ​ <canvas> 是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素.它可以用来制作照片集或者制作简单(也不是 ...

  8. 学习Canvas这一篇文章就够了

    一.canvas简介 ​ <canvas> 是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素.它可以用来制作照片集或者制作简单(也不是 ...

  9. canvas教程(三) 绘制曲线

    经过 canvas 教程(二) 绘制直线 我们知道了 canvas 的直线是怎么绘制的 而本次是给大家带来曲线相关的绘制 绘制圆形 在 canvas 中我们可以使用 arc 方法画一个圆 contex ...

随机推荐

  1. Sqli-labs less 13

    Less-13 本关我们输入username:admin' Password: (随便输) 进行测试 可以看到报错了,错误为: You have an error in your SQL syntax ...

  2. android用户界面的教程实例---转自qianqianlianmeng的博客

    1.android用户界面之AlarmManager教程实例汇总http://www.apkbus.com/android-48405-1-1.html2.android用户界面之文本编辑教程实例汇总 ...

  3. javascript中的对象创建与继承

    js是一门基于原型的面向对象语言,与传统的面向对象如Java,C#相比,它在对象创建及继承上有自己独特的实现方式,本文主要描述js中对象创建及继承的一些实践. 1.对象创建 方式一:工厂模式创建对象 ...

  4. 使用phonegap开发安卓HLS播放软件解决方案

    目前使用phonegap开发的手机应用,很少涉及视频播放的功能,究其原因,主要是phonegap提供的API里面对视频播放功能支持度不够,当然播放音频一般情况下还是能够实现的,由于工作需要,自己研究了 ...

  5. 手机上编程，编写android apk

    韩梦飞沙 yue31313 韩亚飞 han_meng_fei_sha  313134555@qq.com C4Droid:在手机上直接编程,然后导出为apk

  6. 【构造】Gym - 100781B - Bell Ringing

    根据n-1推n的情况,让n从每一个的最右走到最左,再从下一个最左走到最右,如此往复即可. #include<cstdio> using namespace std; int n,a[500 ...

  7. 关于JS的This指针

    下面讨论一个执行上下文的最后一个属性——this指针的概念. This指针 A this value is a special object which is related with the exe ...

  8. IOS Reachability判断所请求服务器是否超时？

    开发Web等网络应用程序的时候,需要确认网络环境,连接情况等信息.如果没有处理它们,是不会通过Apple的审查的. Apple 的 例程 Reachability 中介绍了取得/检测网络状态的方法. ...

  9. NSLog 输出格式集合

    • %@ 对象 • %d, %i  整数 • %u  无符整形 • %f  浮点/双字 • %x, %X 二进制整数 • %o  八进制整数 • %zu size_t • %p  指针 • %e  浮 ...

  10. easyui-combobox绑定回车事件注意事项

    回车事件的定义的位置必须是easyui-combobox数据加载的后面,才有效果. HTML文件: <select id="aucBrandNo" class="e ...