<!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. 洛谷——P1958 上学路线_NOI导刊2009普及（6）

    P1958 上学路线_NOI导刊2009普及(6) 题目描述 你所在城市的街道好像一个棋盘,有a条南北方向的街道和b条东西方向的街道.南北方向的a条街道从西到东依次编号为l到a,而东西方向的b条街道从 ...

  2. VB程序打包方法之如何在发布安装之后不带源码

    很久之前,我发表了一片博客是VB程序如何打包,在那里面我总结了两个方法.有兴趣可以看看我的这篇博客http://blog.csdn.net/lu930124/article/details/88467 ...

  3. 【BZOJ 2803】【POI 2012】Prefixuffix

    http://www.lydsy.com/JudgeOnline/problem.php?id=2803 核心思想是利用单调性. 因为长度为L的前缀和后缀循环同构是AB和BA的形式,我们设\(f(i) ...

  4. lightoj 1052 - String Growth & uva 12045 - Fun with Strings 矩阵

    思路:很容易发现规律,数列和Fib数列一样的. 记开始的时候啊a的个数为Y,b的个数为X.建立矩阵. 代码如下: #include<iostream> #include<cstdio ...

  5. Ubantu Mark

    说明:由于图形化界面方法(如Add/Remove... 和Synaptic Package Manageer)比较简单,所以这里主要总结在终端通过命令行方式进行的软件包安装.卸载和删除的方法. 一.U ...

  6. HDU 4638 Group （2013多校4 1007 离线处理+树状数组）

    Group Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  7. 基于tiny4412的Linux内核移植（支持device tree）（三）

    作者信息 作者: 彭东林 邮箱:pengdonglin137@163.com QQ:405728433 平台简介 开发板:tiny4412ADK + S700 + 4GB Flash 要移植的内核版本 ...

  8. easyui-combobox绑定回车事件相关

    去掉combobox回车内容不匹配清空输入项     问题描述:easyui的combobox插件,输入的内容如果和选项不匹配时,按下回车会导致输入的内容被清空. 解决办法:要解决回车时,combob ...

  9. 为什么控制台console.log一个值，总是会多一个undefined

    我们发现在浏览器控制台打印东西的时候,末尾总是会莫名其妙多出一个undefined? 这是为什么呢? 大胆猜测一下,应该执行的函数没有返回值,而浏览器默认要打印出执行函数的返回值,才会打印undefi ...

  10. 什么是webview

    WebView(网络视图)能加载显示网页,可以将其视为一个浏览器.它使用了WebKit渲染引擎加载显示网页,实现WebView有以下两种不同的方法:第一种方法的步骤:1.在要Activity中实例化W ...