用html5的canvas画布绘制贝塞尔曲线完整代码

 

html5的canvas很强大利用其画布可轻松绘制贝塞尔曲线,为大家以后使用方便,特于此分享实现代码,有此需求的朋友可以参考下

代码如下:

 

<!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>
 

 

 

时间: 2024-10-03 12:23:27

用html5的canvas画布绘制贝塞尔曲线完整代码的相关文章

canvas绘制贝塞尔曲线

原文:canvas绘制贝塞尔曲线 1.绘制二次方贝塞尔曲线 quadraticCurveTo(cp1x,cp1y,x,y); 其中参数cp1x和cp1y是控制点的坐标,x和y是终点坐标 数学公式表示如下: 二次方贝兹曲线的路径由给定点P0.P1.P2的函数B(t)追踪: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <

Android Path绘制贝塞尔曲线实现QQ拖拽泡泡_Android

这两天学习了使用Path绘制贝塞尔曲线相关,然后自己动手做了一个类似QQ未读消息可拖拽的小气泡,效果图如下: 最终效果图 接下来一步一步的实现整个过程. 基本原理 其实就是使用Path绘制三点的二次方贝塞尔曲线来完成那个妖娆的曲线的.然后根据触摸点不断绘制对应的圆形,根据距离的改变改变原始固定圆形的半径大小.最后就是松手后返回或者爆裂的实现. Path介绍: 顾名思义,就是一个路径的意思,Path里面有很多的方法,本次设计主要用到的相关方法有 moveTo() 移动Path到一个指定的点 qua

求解答窗体应用程序开发问题--使用绘制线函数绘制贝塞尔曲线

问题描述 贝塞尔曲线是依据四个位置任意的点坐标绘制出的一条光滑曲线.我们不妨把这四对已知点坐标依次定义成(x0,y0).(x1,y1).(x2,y2)和(x3,y3).贝塞尔曲线必定通过首尾两个点,称为端点:中间两个点虽然未必要通过,但却起到牵制曲线形状路径的作用,称作控制点.在历史上,研究贝塞尔曲线的人最初是按照已知曲线参数方程来确定四个点的思路设计出这种矢量曲线绘制法.贝塞尔曲线的公式:如果已知一条曲线的参数方程,系数都已知,并且两个方程里都含有一个参数t,它的值介于0.1之间,表现形式如下

使用canvas绘制贝塞尔曲线

 1.二次贝塞尔曲线 quadraticCurveTo(cpx,cpy,x,y) //cpx,cpy表示控制点的坐标,x,y表示终点坐标: 数学公式表示如下: 二次方贝兹曲线的路径由给定点P0.P1.P2的函数B(t)追踪: 代码实例:   代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas直线</title> <m

HTML5中Canvas(绘制)使用例子

Canvas中不仅可以画线(路径),还能画很多其他的图像,这一章就介绍Canvas的其他两种绘图API. 一.简单图形,整套的属性和方法专门用于绘制矩形: 1.fillStyle可以设置为CSS颜色.一个图案或一种颜色渐变.fillStyle默认是纯黑色,你可以设置成你喜欢的任意颜色.只要页面打开着,每个绘图上下文都会记录自己的属性,除非你重置过它. 2.fillRect(x,y,width,height)绘制一个矩形,并以当前的fillStyle来填充. 3.srtokeStyle和fillS

如何使用HTML5的Canvas图形元素绘制图形

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 HTML5是目前HTML的最新标准.在笔者写这篇文章时,HTML5仍在积极的发展.HTML5除了提供新的标签信息外,同时还包含了新的应用程序编程接口(API),这样可以使我们能够在网页上提供更多丰富的多媒体和互动功能,而无需使用专有的插件.除了这些万维网联盟还公布了其他的相关技术,比如地理位置定位,脱机存储,档案管理等等. 在HTML5推出后

HTML5 在canvas中绘制文本附效果图

 一.绘制文本 在绘图环境中提供了两种方法在canvas中绘制文本. strokeText(text,x,y) : 在(x,y)处绘制空心的文本. fillText(text,x,y) : (x,y)处绘制实心的文本. 二.在canvas中绘制文本   代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; char

html5使用Canvas中绘制图形2个例子

首先我们先看一线效果图:   想要绘制其他图形,需要使用路径,使用路径包含4个步骤,开始创建路径.创建图形的路径.路径创建完成后,关闭路径和设定绘制样式,调用绘制方法,绘制路径.    核心内容:  绘制路径.moveTo.lineTo.bezierCurveTo  <!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title>&

在Silverlight中绘制贝塞尔曲线

我以前的流程设计器使用的都是曲线,而且不能调扭曲,朋友们意见很大,后来 我升级了设计器,这里贴出我实现扭曲的思路 代码下载: http://files.cnblogs.com/wxwinter/SilverlightBezierSegment.rar 在线演示 : http://silverlight.services.live.com/invoke/71234/SilverlightBezier Segment/iframe.html 效果说明