查看效果：http://keleyi.com/keleyi/phtml/html5/7.htm

完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>用html5的canvas画布绘制贝塞尔曲线-柯乐义</title>

</head>

<body>

<div>

<a href="http://keleyi.com/a/bjac/j77m9131.htm" target="_blank">原文</a></div>

<canvas id="keleyi_com" height="300" width="400"></canvas>

<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 n=0;

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();

}

draw("keleyi_com");

</script>

</body>

</html>

文本：http://www.cnblogs.com/jihua/p/bseqx.html

原文：http://keleyi.com/a/bjac/j77m9131.htm

用html5的canvas画布绘制贝塞尔曲线的更多相关文章

  1. Canvas中绘制贝塞尔曲线

    ① 什么是贝塞尔曲线? 在数学的数值分析领域中,贝济埃曲线(英语:Bézier curve,亦作“贝塞尔”)是计算机图形学中相当重要的参数曲线.更高维度的广泛化贝济埃曲线就称作贝济埃曲面,其中贝济埃三 ...

  2. canvas绘制贝塞尔曲线

    原文:canvas绘制贝塞尔曲线 1.绘制二次方贝塞尔曲线 quadraticCurveTo(cp1x,cp1y,x,y); 其中参数cp1x和cp1y是控制点的坐标,x和y是终点坐标 数学公式表示如 ...

  3. 基于canvas二次贝塞尔曲线绘制鲜花

    canvas中二次贝塞尔曲线参数说明: cp1x:控制点1横坐标 cp1y:控制点1纵坐标 x: 结束点1横坐标 y:结束点1纵坐标 cp2x:控制点2横坐标 cp2y:控制点2纵坐标 z:结束点2横 ...

  4. HTML5使用Canvas来绘制图形

    一.Canvas标签: 1.HTML5<canvas>元素用于图形的绘制,通过脚本(通常是javascript)来完成. 2.<canvas>标签只是图形容器,必须使用脚本来绘 ...

  5. HTML5在canvas中绘制复杂形状附效果截图

    HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...

  6. 探索canvas画布绘制技术

    图片来自KrzysztofBanaś 下面我们开始尝试研究不同的绘图风格和技术 - 边缘平滑,贝塞尔曲线,墨水和粉笔,笔和印章和图案 -等等.事实证明,网上没有太多关于此的内容.在下面的示例中,您请大 ...

  7. HTML5之Canvas画布

    先上代码: <canvas width="1000" height="800">浏览器不支持HTML5!</canvas> <sc ...

  8. 【HTML5】Canvas画布

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  9. HTML5 在canvas中绘制复杂形状

    作者:卿笃军 原文地址:http://blog.csdn.net/qingdujun/article/details/32942667 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,画图环 ...

随机推荐

  1. ORA-01652：无法通过128(在表空间temp中)扩展temp段 解决方法

    ORA-01652:无法通过128(在表空间temp中)扩展temp段 解决方法 (2016-10-21 16:49:53)   今天在做一个查询的时候,报了一个"ORA-01652无法通过 ...

  2. SQL Server 2014新特性探秘(1)-内存数据库

    简介    SQL Server 2014提供了众多激动人心的新功能,但其中我想最让人期待的特性之一就要算内存数据库了.去年我再西雅图参加SQL PASS Summit 2012的开幕式时,微软就宣布 ...

  3. ios语音输入崩溃

    游戏中任何可以输入的地方,只要调用语音输入,必然会导致app崩溃,解决方法如下: ok, so essentially the gist of it is that siri wants gl con ...

  4. 用扩展开发一个PHP类

    原文:http://my.oschina.net/mickelfeng/blog/122519?p=1 假设我们要用PHP扩展实 现一个类Person,它有一个private的成员变量$_name和两 ...

  5. 初学ReactJS，写了一个RadioButtonList组件

     1 <!DOCTYPE html>  2 <html>  3 <head>  4     <title>React Demo</title> ...

  6. MyCAT全局序列号

    在实现分库分表的情况下,数据库自增主键已无法保证自增主键的全局唯一.为此,MyCat 提供了全局sequence,并且提供了包含本地配置和数据库配置等多种实现方式. 本地文件方式 原理:此方式MyCA ...

  7. vmware网卡设置详解

    转载请注明出处!本文连接及作者.不得用于商业用途! http://hi.baidu.com/quantumcloud/blog/item/9156a6c584996c179c163d5b.html B ...

  8. 一台电脑上的git同时使用两个github账户

    需求: 公司有github账号,自己有github账号,想在git上同时使用,两者互不干扰. 思路: 管理两个SHH key. 解决方案: 一.生成两个SSH key 为了举例方便,这里使用“one” ...

  9. SQL Server SQL性能优化之--pivot行列转换减少扫描计数优化查询语句

    原文出处:http://www.cnblogs.com/wy123/p/5933734.html 先看常用的一种表结构设计方式: 那么可能会遇到一种典型的查询方式,主子表关联,查询子表中的某些(或者全 ...

  10. 本周博客--WinForm线程初步 2014-10-31 09:15 54人阅读 评论(0) 收藏

    嗯,WinForm作为一个比较程序的微软的技术已经为我们服务了很久很久,在技术不断更新的今天WinForm虽显老态龙钟但是在客户端快速开发中,它的地位还是无可取代的 今天就来分享一下WinForm中的 ...