小贝_html5 canvas绘制线条曲线

最新推荐文章于 2021-06-17 09:21:12 发布
最新推荐文章于 2021-06-17 09:21:12 发布
阅读量750 收藏 1
点赞数
分类专栏： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014795720/article/details/41145163
版权

HTML5_canvas线条

1、简单线条

2、三角形

3、填充三角形背景颜色

4、线条颜色以及线条大小

5、二次贝塞尔曲线

6、三次贝塞尔曲线


<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="keywords" content="脚本小子_小贝_HTML5_canvas线条"/>
<meta name="description" content="脚本小子_小贝_HTML5_canvas线条"/>
<meta name="" content="脚本小子小贝 xiaobei qq:2801616735"/>
<title>HTML5_canvas线条</title>
<style>
.divbox{
	border:1px solid black;
	float:left;
	width:95%;
	padding:5px;
}
.divcanvas
{
	float:left;
}
canvas{
	border:1px solid red;
}
.divinfo
{
	float:left;
	padding:10px;
	width:500px;
	height:auto;
	border:1px solid black;
}
.divclear
{
	clear:both;
}
</style>
</head>

<body>
	<h2>HTML5_canvas线条</h2>
	<ul>
		<li>1、简单线条</li>
		<li>2、三角形</li>
		<li>3、填充三角形背景颜色</li>
		<li>4、线条颜色以及线条大小</li>
		<li>5、二次贝塞尔曲线</li>
		<li>6、三次贝塞尔曲线</li>
	</ul>
	<hr/>
	<h3>1、简单线条</h3>
	<div class="divbox">
		<div class="divcanvas">
			<canvas id="canvas1" width="400" height="150"></canvas>
		</div>
		<div class="divcanvas">
			<button οnclick="func(1);">创建线条</button>
		</div>
		<div class="divinfo" id="info1" style="display:none;">
			ctx.beginPath(); //开始新路径<br/>
			ctx.moveTo(10,10); //线条定位起点<br/>
			ctx.lineTo(20,50); //线条定位终点<br/>
			ctx.stroke();      //画线条<br/>
		</div>
	</div>
	<div class="divclear"></div>
	<hr/>
	<h3>2、三角形</h3>
	<div class="divbox">
		<div class="divcanvas">
			<canvas id="canvas2" width="400" height="150"></canvas>
		</div>
		<div class="divcanvas">
			<button οnclick="func(2);">创建三角形</button>
		</div>
		<div class="divinfo" id="info2" style="display:none;">
			ctx.beginPath(); //开始新路径<br/>
			ctx.lineWidth = 10;  //线条宽度大小<br/>
			ctx.lineJoin = "round"; //线条相交时夹角形状 bevel==>创建斜角 round==>创建圆角 miter==>创建尖角(默认)<br/>
			ctx.moveTo(50,50); //线条定位起点<br/>
			ctx.lineTo(50,100); //线条定位终点<br/>
			ctx.lineTo(100,100); //线条定位终点<br/>
			ctx.closePath(); //创建从当前点到开始点的路径<br/>
			ctx.stroke(); //画线条
		</div>
	</div>
	<div class="divclear"></div>
	<hr/>
	<h3>3、填充三角形背景颜色</h3>
	<div class="divbox">
		<div class="divcanvas">
			<canvas id="canvas3" width="400" height="150"></canvas>
		</div>
		<div class="divcanvas">
			<button οnclick="changeColor(3,'red');">填充红色</button>
			<button οnclick="changeColor(3,'blue');">填充蓝色</button>
		</div>
		<div class="divinfo" id="info3" style="display:none;">
			ctx.beginPath(); //开始新路径<br/>
			ctx.lineWidth = 10;  //线条宽度大小<br/>
			ctx.lineJoin = "round"; //线条相交时夹角形状 bevel==>创建斜角 round==>创建圆角 miter==>创建尖角(默认)<br/>
			ctx.moveTo(50,50); //线条定位起点<br/>
			ctx.lineTo(50,100); //线条定位终点<br/>
			ctx.lineTo(100,100); //线条定位终点<br/>
			ctx.closePath(); //创建从当前点到开始点的路径<br/>
			ctx.stroke(); //画线条 <br/>
			ctx.fillStyle = "color" //填充的颜色设置<br/>
			ctx.fill();  //进行填充操作
		</div>
	</div>
	<div class="divclear"></div>
	<hr/>
	<h3>4、线条颜色以及线条大小</h3>
	<div class="divbox">
		<div class="divcanvas">
			<canvas id="canvas4" width="400" height="150"></canvas>
		</div>
		<div class="divcanvas">
			<button οnclick="changeColor(4,'red');">创建红色</button>
			<button οnclick="changeColor(4,'blue');">创建蓝色</button>
		</div>
		<div class="divinfo" id="info4" style="display:none;">
			ctx.beginPath(); //开始新路径<br/>
			ctx.lineWidth = 10;  //线条宽度大小<br/>
			ctx.strokeStyle = lineColor; //线条颜色<br/>
			ctx.moveTo(50,50); //线条定位起点<br/>
			ctx.lineTo(50,100); //线条定位终点<br/>
			ctx.stroke(); //画线条
		</div>
	</div>
	<div class="divclear"></div>
	<hr/>
	<h3>5、二次贝塞尔曲线</h3>
	<div class="divbox">
		<div class="divcanvas">
			<canvas id="canvas5" width="400" height="150"></canvas>
		</div>
		<div class="divcanvas">
			<button οnclick="func(5);">二次贝塞尔曲线</button>
		</div>
		<div class="divinfo" id="info5" style="display:none;">
			ctx.beginPath(); //开始新路径<br/>
			ctx.moveTo(30,30); //线条定位起点<br/>
			ctx.quadraticCurveTo(40,100,200,40); //(x1,y1,x2,y2) (x1,y1)为控制点 (x2,y2)为结束点<br/>
			ctx.stroke(); //画线条
		</div>
	</div>
	<div class="divclear"></div>
	<hr/>
	<h3>6、三次贝塞尔曲线</h3>
	<div class="divbox">
		<div class="divcanvas">
			<canvas id="canvas6" width="400" height="150"></canvas>
		</div>
		<div class="divcanvas">
			<button οnclick="func(6);">三次贝塞尔曲线</button>
		</div>
		<div class="divinfo" id="info6" style="display:none;">
			ctx.beginPath(); //开始新路径<br/>
			ctx.moveTo(30,30); //线条定位起点<br/>
			ctx.bezierCurveTo(30,100,140,100,140,40); //(x1,y1,x2,y2,x3,y3) (x1,y1)为控制点1 (x2,y2)为控制点2 (x3,y3)为结束点<br/>
			ctx.stroke(); //画线条
		</div>
	</div>
</body>
<script>
	var lineColor = 'black';
	var lineWidth = '10';
	function changeColor(id,color)
	{
		lineColor = color;
		func(id);
	}
	
	function func(id)
	{
		var c = document.getElementById("canvas"+id);
		var ctx = c.getContext("2d");
		switch(id)
		{
			case 1:
				ctx.beginPath();
				ctx.moveTo(10,10);
				ctx.lineTo(20,50);
				ctx.stroke();
			break;
			case 2:
				ctx.beginPath();
				ctx.lineWidth = 10;
				ctx.lineJoin = "round"; //bevel==>创建斜角 round==>创建圆角 miter==>创建尖角(默认)
				ctx.moveTo(50,50);
				ctx.lineTo(50,100);
				ctx.lineTo(100,100);
				ctx.closePath();
				ctx.stroke();
			break;
			case 3:
				ctx.beginPath();
				ctx.lineWidth = 10;
				ctx.lineJoin = "round"; //bevel==>创建斜角 round==>创建圆角 miter==>创建尖角(默认)
				ctx.moveTo(50,50);
				ctx.lineTo(50,100);
				ctx.lineTo(100,100);
				ctx.closePath();
				ctx.stroke();
				ctx.fillStyle = lineColor;
				ctx.fill();
			break;
			case 4:
				ctx.beginPath();
				ctx.lineWidth = lineWidth;
				ctx.strokeStyle = lineColor;
				ctx.moveTo(100,50);
				ctx.lineTo(50,100);
				ctx.stroke();
			break;
			case 5:
				ctx.beginPath();
				ctx.moveTo(30,30);
				ctx.quadraticCurveTo(40,100,200,40);
				ctx.stroke();
			break;
			case 6:
				ctx.beginPath();
				ctx.moveTo(30,30);
				ctx.bezierCurveTo(30,100,140,100,140,40);
				ctx.stroke();
			break;
		}
		document.getElementById("info"+id).style.display = "";
	}
</script>
	
</html>


脚本小子-小贝
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Canvas---Canvas版画图、虚线、辅助线、线条颜色、线条宽度，整合加强版
MIKUScallion的专栏
01-26 9762
使用Canvas实现画图程序。 本次更新主要实现了一下功能： 虚线实线的选择、辅助线、线条颜色选择、线条宽度选择 进一步整理了下代码，发现了不少很有用的写法，具体看下面。 canvas{ background-color: rg
HTML5 Canvas 教程：二、线条
gunnery的专栏
10-14 1022
二、线条Lines   2.1直线 Line   要在画布上绘制线条，可以通过调用：beginPath()、moveTo()、lineTo()和stroke()方法来实现。 首先，我们可以使用beginPath()方法来声明我们即将绘制一个新的路径。接下来，我们可以使用moveTo()方法定位上下文对象的绘图起点（即绘图光标），然后使用lineTo()方法从起始位置绘制一条直线到一个新的...
canvas设置颜色及线条样式
星星有所不知
03-21 2万+
canvas设置颜色及线条样式1. canvas设置颜色2. canvas设置线条样式 1. canvas设置颜色 fillStyle = color; //设置图形的填充颜色 strokeStyle = color; //设置图形轮廓的颜色 color可以是表示css颜色值的字符串，渐变对象或者图案对象，color默认为黑色 globalAlpha = 透明度（0-1）//设置透明度，有效范围...
Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)
热门推荐
任海丽(3G/移动开发)
01-20 30万+
1、首先说一下canvas类： Class Overview The Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writing into t
HTML5画布Canvas线段、矩形、弧形及贝塞尔曲线等简单图形绘制
尐轩web前端网络日志
01-08 1万+
HTML5中最有意思的就是这个canvas了 通过它我们可以画自己想要的图形 它也是十分重要的技术 应用于游戏、图表等等 或者绘制各种酷炫的东西 这里给大家分享一个网站 传送门 里面都是canvas技术绘制的图形画布创建canvas是html的一个标签 是一个图形容器 首先要在html页面添加一个canvas元素<canvas id="myCanvas" width=500 heig
Html5_Canvas绘制心电图曲线.rar
07-10
Html5_Canvas绘制心电图，绘制出了超逼真的心电图曲线，要是有什么第三方硬件输入数据，是不是这真的就是心电图了？PS：查看效果时建议使用Google Chrome浏览器，因Google Chrome浏览器对Html5支持最好。
HTML5 canvas基本绘图之绘制曲线
09-27
<canvas></canvas>是HTML5中新增的标签，用于绘制图形，这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之绘制曲线方法，感兴趣的小伙伴们可以参考一下
html5 Canvas绘制线条 closePath()实例代码
09-28
html5 Canvas绘制线条 closePath()实例代码，需要的朋友可以参考下
html5 canvas绘制线条组合几何体动画特效
06-11
html5 canvas绘制一款酷炫的线条组合几何体动画特效，2d彩色线条花环几何体变换动画效果。
HTML5 Canvas鼠标绘制线条特效
06-24
HTML5 Canvas鼠标绘制线条特效是一款html5基于canvas绘制鼠标跟随的线条光标动画特效。
html5 lineto 颜色,html5-canvas lineTo（路径命令）
weixin_29775447的博客
06-17 407
示例context.lineTo(endX,endY)从当前笔位置绘制一条线段以协调[endX，endY]html>body{background-color:white;}#canvas{border:1pxsolidred;}window.onload=(function(){// 获取对canvas元素及其上下文的引用varcanvas=document.getEleme...
HTML5 canvas Color,Text,setLineDash,lineDashOffset
Hello World ~
06-03 4030
fillStyle = color 设置图形的填充颜色 for( var i = 0 ; i <=7; i++){ for ( var j=0; j<=7; j++){ ctx.fillStyle='rgba(' + Math.floor(255-15.5*i) + ',0,0,0.5)';
canvas动态画一条不同颜色的线
黑黑黑眼圈博客
08-15 5818
问题描述 ##使用canvas动态画一条颜色不同的线，即前五个点连成一条黑线后五个点连成一条红线，并且动态呈现。 思路呈现 首先，了解非动态画一条不同颜色的线。 代码展示： <script> //demo1 不渐变线条 var c = document.getElementById("myCanvas"); var ctx = c.getContex...
canvas(画线填充颜色)
weixin_45019566的博客
09-13 2096
canvas let canvas = document.getElementById('canvas');// 获取html上的canvas元素 canvas.width // 设置canvas宽度 canvas.height // 设置canvas高度 let content = canvas.getContext('2d'); // 获取上下文 content.stroke(); // 画线 content.fill(); //填充颜色 实现代码： <script>
Canvas快速入门知识点
weixin_34238633的博客
12-22 80
基本用法 ctx.beginPath() ctx.moveTo(x, y) ctx.lineTo(x, y) ctx.stroke() 复制代码 图形 折线 方形 ctx.fillRect() ctx.fillRect(25,25,25,25); 复制代码绘制形状 圆 添加样式和颜色 色彩 ctx.fillStyle = color //设置图形的填充颜色 ctx.strokeSty...
canvas样式和颜色
大白兔
10-25 1万+
color（颜色） fillStyle = color; // 设置图形的填充颜色 stokeStyle = color; // 设置图形的轮廓颜色 transparency（透明度） line styles（线型） gradient（渐变） patterns（图案样式） shadows（阴影） canvas填充规则 ...
Three.js Example 注解 —— canvas_lines_colors.html
司马懿的西山居
03-14 947
本文搬自我的Github，https://github.com/555chy/three.js-example-comment，有兴趣的可以一起来完善，这个为Three.js的Example进行注解，方便初学者阅读 three.js 官网 Example 地址：https://threejs.org/examples/ <!DOCTYPE html> <html lang="en...
钢桁架结构振动特性渐变分析工具
最新发布
05-20
钢桁架结构振动特性渐变分析工具
实现HTML5 Canvas绘制时钟
06-01
好的，下面是一个简单的HTML5 Canvas绘制时钟的示例代码： ``` <!DOCTYPE html> <html> <title>Canvas时钟 canvas { border: 2px solid black; } <canvas id="clock" width="200" height="200"></...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值