<!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. 【爬虫】python 多线程知识

    第一段代码: __author__ = 'Administrator' import threading import time index = 0 class MyThread(threading. ...

  2. Xamarin XAML语言教程模板视图TemplatedView(一)

    Xamarin XAML语言教程模板视图TemplatedView(一) 模板视图TemplatedView 与模板页面相对的是TemplatedView,它被称为模板视图,它的功能和模板页面类似,也 ...

  3. 解决Xamarin Android SDK Manager闪退问题

    解决Xamarin Android SDK Manager闪退问题 SDK Manager闪退是因为它找不到java.exe导致的.SDK Manager默认是通过读取注册表中JDK安装信息来java ...

  4. 浅谈OI中的提交答案

    在OI中,题目有三类: 传统题 交互题 提交答案题 今天来了解一下第三类 概述 传统题:给你一个题面,你需要交一个程序,评测姬会用你的程序运行你看不到的一些测试点,用输出和正确答案比较 提交答案题:给 ...

  5. andorid关于selector更换图片失效

    写selector的xml文件时,需注意item的顺序,不带状态的item放在最后,否则selector无效 为按钮写了一个selector,一个正常状态,一个点击的状态,用了两张不同的图片.以求达到 ...

  6. C++ Any 任意基础类型封装

    下面是本人使用C++封装的一个针对任意基础类型以及用户自定义类型指针的通用类型.目的是为方便常用类型使用统一化及便利化.该类型的使用就与平时使用基础类型基本没什么差别.具体可参看以下代码及测试代码. ...

  7. c99柔性数组

    变长结构体 struct test { int nSize; char data[]; // 或者 char data[0];但建议使用 char data[]; 注意:c98 时不支持柔性数组,其仅 ...

  8. （转）Linux下数据段的区别（数据段、代码段、堆栈段、BSS段）

    进程(执行的程序)会占用一定数量的内存,它或是用来存放从磁盘载入的程序代码,或是存放取自用户输入的数据等等.不过进程对这些内存的管理方式因内存用途 不一而不尽相同,有些内存是事先静态分配和统一回收的, ...

  9. Fatal error: Call to undefined function mb_detect_encoding()

    1.找到php扩展目录(我的php扩展目录的路径是:C:\Program Files\AppServ\php\extensions)     在extensions目录下面找到php_mbstring ...

  10. location和history

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...