<!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. Spiral Matrix(LintCode)

    Spiral Matrix Given a matrix of m x n elements (m rows, n columns), return all elements of the matri ...

  2. qwb与学姐 （带秩并查集）

    qwb与学姐 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 149  Solved: 54[Submit][Status][Web Board] Des ...

  3. FZOJ 2245 动态树（离散+离线+ 树状数组）

    Problem 2245 动态树 Accept: 17    Submit: 82Time Limit: 3000 mSec    Memory Limit : 65536 KB  Problem D ...

  4. 【大视野入门OJ】1083：数组的二分查找

    Description 在1500个整数中查整数x的位置,这些数已经从小到大排序了.若存在则输出其位置,若不存在则输出-1. Input 第一行,一个整数x 后面1500行,每行一个整数 Output ...

  5. 【动态规划】Gym - 101201A - Alphabet

    题意:一个字符串被定义为“alphabetical”,当且仅当它能够删除一些字符,变成“ab...yz”,给你一个只由小写字母组成的字符串,问你最少插入几个字母,使它变成“alphabetical”的 ...

  6. 【点分治】Osipovsky Cup 2014 Kovrov, Sunday, December 21, 2014 Problem A. Attack and Defence

    题意:给你一棵树,每个点有一个左括号或者右括号,问你树上能够完美匹配的路径数量(l->r,r->l 视作不同路径). 点分治可以使用“不扣去重复答案”的写法,只不过,要先将每个点的子树按照 ...

  7. oracle数据库，mybatis批量insert，缺失values字段

    报错:### Error updating database.  Cause: java.sql.SQLException: ORA-00926: 缺失 VALUES 关键字### The error ...

  8. [WikiOI "天梯"1281] Xn数列

    题目描述Description 给你6个数,m, a, c, x0, n, g Xn+1 = ( aXn + c ) mod m,求Xn m, a, c, x0, n, g<=10^18 输入描 ...

  9. 【js】js数组置空的三种方式

    方式1: var arr = new Array(1,2,3); alert(arr); arr.splice(0, arr.length); alert(arr); 方式2: var arr = n ...

  10. express和json的调用

    在express工程里,建立app.js var express = require('express'); var app = express(); //数据接口 var newsdata=[{ ' ...