用html5的canvas画布绘制贝塞尔曲线

最新推荐文章于 2023-08-03 08:24:58 发布
最新推荐文章于 2023-08-03 08:24:58 发布
阅读量83 收藏
点赞数
文章标签： xhtml javascript ViewUI

查看效果：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

weixin_33859665
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html标签canvas绘画曲线渐变（贝塞尔曲线）
qq_37641027的博客
02-14 271
/ 拐弯点，结束点。// (x, y) 就是鼠标在 canvas 单击时的坐标。// 容器，宽度，开始，拐点，结束。
用html5的canvas画布绘制贝塞尔曲线完整代码
09-28
html5的canvas很强大利用其画布可轻松绘制贝塞尔曲线，为大家以后使用方便，特于此分享实现代码，有此需求的朋友可以参考下
html5贝塞尔曲线,HTML5 Canvas 绘制贝塞尔曲线 Bezier and quadratic curves
weixin_39648492的博客
06-18 176
贝塞尔曲线 ：它可以是二次和三次方的形式，一般用于绘制复杂而有规律的形状。方法：quadraticCurveTo(cp1x, cp1y, x, y)bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)参数 x 和 y 是终点坐标，cp1x 和 cp1y 是第一个控制点的坐标，cp2x 和 cp2y 是第二个的。用贝塞尔曲线绘制聊天气泡说明用贝塞尔曲线绘制聊天气泡代...
html5贝塞尔,html5 canvas贝塞尔曲线篇(下)
weixin_29247219的博客
06-16 111
html5 canvas贝塞尔曲线篇html5 canvas贝塞尔曲线篇window.addEventListener('load',eventWindowLoaded,false);function eventWindowLoaded(){canvasApp();}function canvasSupport(){return Modernizr.canvas;}function canvasA...
HTML5 Canvas（画布）
最新发布
shou_ren_bai_bu的博客
08-03 185
简单来说，是HTML5中的标签，它是一个容器，可以使用JS在其中绘制图形或文字。MDN是一个可以使用脚本 (通常为JavaScript) 来绘制图形的HTML元素。例如，它可以用于绘制图表、制作图片构图或者制作简单的动画。主要聚焦于2D图形。
html5贝塞尔,用html5的canvas画布绘制贝塞尔曲线完整代码
weixin_39598796的博客
06-16 61
查看效果：http://keleyi.com/keleyi/phtml/html5/7.htm完整代码：复制代码代码如下:用html5的canvas画布绘制贝塞尔曲线原文function draw(id){var canvas=document.getElementById(id);if(canvas==null)return false;var context=canvas.getContext...
Ah52_html5_WEB曲线_Transformations_
10-03
PATHS)、绘制函数、MOVETO方法、二次方、三次方贝塞尔曲线、像素级操作、绘制图片等丰富内容，定义了二维Canvas（画布）的绘画API，使用这些API使得可以在Web页面上进行立即模式的二维图形绘制。
HTML5 Canvas 2D API规范中文版pdf HTML5教程
05-09
网页制作,HTML5教程 一本涉及高级内容应用的HTML5教程，...PATHS)、绘制函数、MOVETO方法、二次方、三次方贝塞尔曲线、像素级操作、绘制图片等丰富内容，定义了二维Canvas（画布）的绘画API，使用这些API使得可以在
p5.bezier:p5.bezier库使您可以轻松绘制连续和闭合的bezier曲线
04-29
要在画布上绘制贝塞尔曲线，只需使用newBezier() ： newBezier ( [ [ 85 , 20 ] , [ 10 , 10 ] , [ 90 , 90 ] , [ 15 , 80 ] , [ 20 , 100 ] ,] ) 什么是贝塞尔曲线？ 贝塞尔曲线是在计算机图形学和相关领域中使用...
apple-pencil-safari-api-test:画布素描板，强制触摸，实时贝塞尔曲线
05-01
平滑的贝塞尔曲线绘制 在香草JS中。 在iOS 9.3的Safari和Google Chrome中进行了测试。 | 。 帮助我在Android / Windows / macOS设备上进行测试，请留下问题！ 原料药 功能（具有iOS 9的Apple设备） 功能（具有...
自动生成贝塞尔曲线html,HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
weixin_30755903的博客
06-05 225
在HTML5 Canvas中，可以用以下方法描画三阶和二阶的贝塞尔曲线：复制代码代码如下:context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)context.quadraticCurveTo(cpx, cpy, x, y)贝塞尔曲线是在二维平面上由一个“起始点”，一个“结束点”，以及一个或多个“控制点”定义的曲线。普通的三阶贝塞尔曲线使用两个控制点...
自动生成贝塞尔曲线html,canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
weixin_36118143的博客
06-05 769
写在最前由于原生的Canvas最高只支持到三阶贝塞尔曲线，那么我想添加多个控制点怎么办呢？(即便大部分复杂曲线都可以用3阶贝塞尔来模拟)与此同时，关于贝塞尔控制点的位置我们很难非常直观的清楚到底将控制点设置为多少可以形成我们想要的曲线。本着解决以上两个痛点同时社区内好像并没有N阶的解决方案(js版)故这次作者非常认真的开源了bezierMaker.js！bezierMaker.js理论上支持N阶贝...
canvas-贝塞尔
nicecode
07-27 79
二次贝塞尔 ​ quadraticCurveTo(cp1x, cp1y, x, y) ​ 绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。 ​ 起始点为moveto时指定的点 ​ 必过起始点和结束点 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css">
html贝塞尔曲线在线,使用canvas绘制贝塞尔曲线
weixin_34820751的博客
05-31 842
1、二次贝塞尔曲线quadraticCurveTo(cpx,cpy,x,y)　　//cpx，cpy表示控制点的坐标,x，y表示终点坐标；数学公式表示如下：二次方贝兹曲线的路径由给定点P0、P1、P2的函数B(t)追踪：代码实例：复制代码代码如下:canvas直线body, h1{margin:0;}canvas{margin: 20px;}二次贝塞尔曲线function draw() {var c...
html5 编写贝塞尔曲线,HTML5 Canvas笔记——编写可编辑和拖动的贝塞尔曲线
weixin_33837846的博客
06-24 526
HTML5 Canvas编写拖动和编辑图形的程序——贝塞尔曲线2-28.jsvar canvas = document.getElementById("canvas"),context = canvas.getContext("2d"),eraseAllButton = document.getElementById("eraseAllButton"),strokeStyleSelect = do...
html贝塞尔曲线爱心,史上最全的贝塞尔曲线(Bezier)全解(三):贝塞尔曲线实现满屏爱心...
weixin_29732737的博客
06-18 644
这一篇文章会完整的介绍如何通过贝塞尔曲线实现爱心点赞的效果,如果实在看不懂,可以看第一篇贝塞尔曲线的简介,还有第二篇安卓中的简单使用;好了,终于到了放大招的时候了,真实憋了很久了这里写图片描述先做一些准备工作,绘制各种颜色的红心:private Bitmap creatHeart(int color) {int width = bitmap.getWidth();int height = bitm...
Canvas（HTML 5 元素）之绘制曲线图形
两个月亮
01-31 2274
在下图中，左下角的红色方块代表第一个控制点，右上角的红色方块代表第二个控制点。函数的最后一个参数我们可以获得一个可以与当前图形互补成圆形的图形。函数会将绘制的图形的首尾进行连接，所以我们仅使用。/* 使 body 元素内的元素均居中显示 *//* 设置 Canvas 元素的边框样式 */// 如需运行示例，请将后续示例代码插入此处。/* 去除部分元素的默认属性 *//* 设置圆角半径 */
HTML5 Canvas中的贝塞尔曲线
weixin_30284355的博客
07-14 126
　　在HTML5提供的画布功能，也就是Canvas中，getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。本文以getContext("2d")中提供的方法为例，简要研究了其中用于绘制曲线路径的贝塞尔曲线。 　　JavaScript中的getContext("2d")为我们提供了两种绘制贝塞尔曲线路径的方法，分别是quadraticCurveTo()用于绘制二...
如何用Delphi绘制一个贝塞尔曲线
02-16
在 Delphi 中绘制贝塞尔曲线，可以使用 TCanvas 对象的相关方法来实现。 具体步骤如下： 1.创建一个画布对象 TCanvas。 2.设置画布的绘制属性，如画笔颜色、线条宽度等。 3.使用画布对象的 MoveTo 和 CurveTo 方法来绘制贝塞尔曲线。MoveTo 方法设置起始点，CurveTo 方法则绘制贝塞尔曲线的路径。贝塞尔曲线的路径需要通过控制点来确定，可以通过指定曲线的起始点、终止点以及一个或多个控制点来实现。 4.绘制完毕后，需要释放画布对象。 以下是一个绘制二次贝塞尔曲线的示例代码： ``` procedure TForm1.Button1Click(Sender: TObject); var Canvas: TCanvas; begin Canvas := Self.Canvas; Canvas.Pen.Color := clRed; //设置画笔颜色 Canvas.Pen.Width := 2; //设置线条宽度 Canvas.MoveTo(50, 100); //设置起始点 Canvas.CurveTo(100, 50, 150, 100); //绘制二次贝塞尔曲线 Canvas.Pen.Color := clBlack; //恢复画笔颜色 Canvas.Pen.Width := 1; //恢复线条宽度 end; ``` 这段代码会在窗体的 Canvas 上绘制一个红色的二次贝塞尔曲线，起始点为 (50, 100)，终止点为 (150, 100)，控制点为 (100, 50)。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值