1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <script type="text/javascript">
  7.             function draw(id){
  8.                 var canvas = document.getElementById(id);
  9.                 if(canvas == null){
  10.                     return false;
  11.                 }
  12.                 var context = canvas.getContext('2d');
  13.                 context.fillStyle = "#eeeeff";
  14.                 context.fillRect(0,0,400,300);
  15.                 var dx = 150;
  16.                 var dy = 150;
  17.                 var s = 100;
  18.                 context.beginPath();
  19.                 context.globalCompositeOperation = 'and';
  20.                 context.fillStyle = 'rgb(100,255,100)';
  21.                 context.strokeStyle = 'rgb(0,0,100)';
  22.                 var x = Math.sin(0);
  23.                 var y = Math.cos(0);
  24.                 var dig = Math.PI/15*11;
  25.                 for(var i=0;i<30;i++){
  26.                     var x = Math.sin(i*dig);
  27.                     var y = Math.cos(i*dig);
  28.                     context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s);
  29.                 }
  30.                 context.closePath();
  31.                 context.fill();
  32.                 context.stroke();
  33.             }
  34.         </script>
  35.     </head>
  36.     <body onload="draw('canvas');">
  37.         <canvas id="canvas" width="400" height="300"></canvas>
  38.     </body>
  39. </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. 50 years, 50 colors HDU - 1498（最小点覆盖或者说最小顶点匹配）

    On Octorber 21st, HDU 50-year-celebration, 50-color balloons floating around the campus, it's so nic ...

  2. [USACO 2018 Jan Gold] Tutorial

    Link: USACO 2018 Jan Gold 传送门 A: 对于不同的$k$,发现限制就是小于$k$的边不能走 那么此时的答案就是由大于等于$k$的边形成的图中$v$所在的连通块除去$v$的大小 ...

  3. [BZOJ 3326] 数数

    Link: BZOJ 3326 传送门 Solution: 明显是一道数位$dp$的题目,就是递推式复杂了点 先要求出一个数$\bar{n}$向添加一位后的$\bar{np}$的转化关系 令$res[ ...

  4. BZOJ 4884 [Lydsy2017年5月月赛]太空猫（单调DP）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=4884 [题目大意] 太空猫(SpaceCat)是一款画面精致.玩法有趣的休闲游戏, 你 ...

  5. 判断隐式Intent是否有响应

    PackageManager manager = getContext().getPackageManager(); if (manager.queryIntentActivities(intent, ...

  6. C# mvc 上传多个附件

    <div class="col-xs-12 mcp-list-item" style="margin-top:20px"> <div clas ...

  7. 为Go语言GC正名－20秒到100微妙的演变史

    http://blog.csdn.net/erlib/article/details/51850912 https://blog.twitch.tv/gos-march-to-low-latency- ...

  8. 打印出C# 中float ,double 在内存中的存放形式

    float floatA = 2.2f; ); ; i < ;++i ) { uint temp = 0x80000000 & (a << i); ) { Console.W ...

  9. jvm分析内存泄露

          首页 所有文章 资讯 Web 架构 基础技术 书籍 教程 Java小组 工具资源 - 导航条 - 首页 所有文章 资讯 Web 架构 基础技术 书籍 教程 Java小组 工具资源     ...

  10. EasyUI datagrid 双击行事件

    1.EasyUI 实现点击行的任何位置,触发事件 onLoadSuccess:function(data){ } , pagination : false, //双击事件 onDblClickRow: ...