<!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. 洛谷——P1529 回家 Bessie Come Home

    P1529 回家 Bessie Come Home 题目描述 现在是晚餐时间,而母牛们在外面分散的牧场中. 农民约翰按响了电铃,所以她们开始向谷仓走去. 你的工作是要指出哪只母牛会最先到达谷仓(在给出 ...

  2. bash 中的变量可以这么用

    举个例子: t.sh ====================== #!/bin/bash ./a.sh ./b.sh ======================= a.sh =========== ...

  3. [Atcoder Grand Contest 004] Tutorial

    Link: AGC004 传送门 A: …… #include <bits/stdc++.h> using namespace std; long long a,b,c; int main ...

  4. 【树形dp】vijos P1180 选课

    题解: http://www.cppblog.com/rakerichard/articles/105004.html 惊了,讨论子树大小能否dp真鸡儿麻烦,按照上面那份题解,可以不用分这么多类,可以 ...

  5. python基础之数据类型，交互，格式化输出，基本运算符

    数据类型 1.什么是数据类型? 变量值才是我们存的数据,所以数据类型指的是变量值的种类 2.为何数据要分类? 变量值是用来保存现实世界中的状态的,那么针对不同的状态,就应该用不同类型的数据去表示 3. ...

  6. ContOS下部署javaweb项目

    1.jdk安装 下载jdk jdk-7u79-linux-x64.rpm # rpm -ivh jdk-7u79-linux-x64.rpm安装  # rpm -e jdk-7u79-linux-x6 ...

  7. [转] json字符串转换为JSONObject和JSONArray

    一.下载json 具体到http://www.json.org/上找java-json下载,并把其放到项目源代码中,这样就可以引用其类对象了 二.具体转化过程 //JSONObject String ...

  8. [转]Java中this的意义

    1. this 指的不是成员变量还是方法里的参数值指得是这个类自身 class a{int i = 0;public void aa(){System.out.print(i);}public voi ...

  9. 使用XML向SQL Server 2005批量写入数据——一次有关XML时间格式的折腾经历

    使用XML向SQL Server 2005批量写入数据——一次有关XML时间格式的折腾经历   原文:使用XML向SQL Server 2005批量写入数据——一次有关XML时间格式的折腾经历 常常遇 ...

  10. FTP客户端工具

    推荐使用8UFTP.小.快.好! 8UFTP工具分为8UFTP客户端工具和 8UFTP智能扩展服务端工具,涵盖其它FTP工具所有的功能.不占内存,体积小,多线程,支持在线解压缩.界面友好,操作简单,可 ...