HTML5学习第15篇——canvas之线条样式

canvas线条样式练习:

lineCap

设置或返回线条末端线帽的样式。

描述
butt默认。向线条的每个末端添加平直的边缘。
round向线条的每个末端添加圆形线帽。
square向线条的每个末端添加正方形线帽。

 提示:"round" 和 "square" 会使线条略微变长。


lineJoin        

设置或返回两条线相交时,所创建的拐角类型

描述
bevel创建斜角。
round创建圆角。
miter默认。创建尖角。

示例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>canvas 线条显示</title>
	<style type="text/css">
		canvas{
			border:1px solid red;
		}
	</style>
</head>
<body>
	<canvas width="600" height="300"></canvas>
	<script type="text/javascript">
		var c = document.querySelector('canvas');
		var ctx = c.getContext("2d");

		//lineCap设置或返回线条末端线帽的样式。
		/*butt	默认。向线条的每个末端添加平直的边缘。
		  round	向线条的每个末端添加圆形线帽。
		  square向线条的每个末端添加正方形线帽。
		  提示:"round" 和 "square" 会使线条略微变长。
		*/

		//lineJoin设置或返回两条线相交时,所创建的拐角类型
		/*
			bevel	创建斜角。
			round	创建圆角。
			miter	默认。创建尖角。
		*/

		//绘制第1个大于号图形 >
		ctx.moveTo(100,100);
		ctx.lineTo(200,150);
		ctx.lineTo(100,200);

		ctx.lineCap = "butt";//默认 平直的边缘
		ctx.lineJoin = "miter";//默认尖角

		ctx.lineWidth = 10;
		ctx.strokeStyle = "red";
		ctx.stroke();

		ctx.beginPath();

		//绘制第2个大于号图形 >
		ctx.moveTo(250,100);
		ctx.lineTo(350,150);
		ctx.lineTo(250,200);

		ctx.lineCap = "round";// 圆形线帽
		ctx.lineJoin = "round";//圆角

		ctx.lineWidth = 10;
		ctx.strokeStyle = "green";
		ctx.stroke();

		ctx.beginPath();

		//绘制第3个大于号图形 >
		ctx.moveTo(400,100);
		ctx.lineTo(500,150);
		ctx.lineTo(400,200);

		ctx.lineCap = "square";//默认 正方形线帽
		ctx.lineJoin = "bevel";//默认斜角

		ctx.lineWidth = 10;
		ctx.strokeStyle = "blue";
		ctx.stroke();
	</script>
</body>
</html>

示例效果:

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js代码 [removed] ;(function() { 'use strict'; var c = document.getElementById('c'); var ctx = c.getContext('2d'); var w = c.width = window.innerWidth; var h = c.height = window.innerHeight; var cx = w / 2; var cy = h / 2; var fl = 1000; function prj(obj) { var cz = obj.z fl; if(cz === 0) return; var scl = fl / cz; obj.p.x = cx obj.x * scl; obj.p.y = cy obj.y * scl; obj.s = scl; } var P = function(x, y, z) { this.x = x; this.y = y; this.z = z; this.s = 1; this.cl = 0; this.p = { x: 0, y: 0 }; }; P.prototype = { constructor: P, update: function() { this.z -= 30; }, render: function(ctx) { if(this.z <= -fl) return; ctx.save(); ctx.translate(this.p.x, this.p.y); ctx.scale(this.s, this.s); ctx.fillStyle = 'hsla(' this.cl ', 100%, 50%, 0.5)'; ctx.beginPath(); ctx.arc(0, 0, 2, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } }; var M = function(x, y, z) { this.list = []; this.max = 100; this.x = x; this.y = y; this.z = z; this.s = 1; this.p = { x: 0, y: 0 }; this.ax = Math.random() * (Math.PI * 2); this.ay = Math.random() * (Math.PI * 2); this.rx = Math.random() * 100; this.ry = Math.random() * 100; this.cl = Math.random() * 360; this.cls = Math.random(); }; M.prototype = { constructor: M, update: function() { this.cl = this.cls; this.ax = Math.random() * 0.1 - 0.02; this.ay = Math.random() * 0.1 - 0.02; this.x = Math.cos(this.ax) * 100; this.y = Math.sin(this.ay) * 100; this.z = 10; if(this.z > fl) this.z = fl; if(this.list.length < this.max) { if(Math.random() * 100 < 50) { var pp = new P(this.x, this.y, this.z); pp.cl = this.cl; this.list.push(pp); } } else { var pp = this.list.shift(); pp.x = this.x; pp.y = this.y; pp.z = this.z; pp.cl = this.cl; this.list.push(pp); } }, render: function(ctx) { if(this.z <= -fl) return; ctx.save(); ctx.translate(this.p.x, this.p.y); ctx.fillStyle = 'green'; ctx.beginPath(); ctx.arc(0, 0, 2, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } }; function update(mv, list) { for(var i = 0; i < list.length; i ) { var p = list[i]; p.update(); prj(p); p.render(ctx); } for(var i = list.length-1; i >= 0; i--) { var p = list[i]; if(p.z <= -fl) continue; if(i === list.length - 1) { ctx.lineWidth = Math.random(); ctx.strokeStyle = 'hsl(' mv.cl ', 100%, 50%)'; ctx.beginPath(); ctx.moveTo(p.p.x, p.p.y); } else { ctx.lineTo(p.p.x, p.p.y); } } ctx.stroke(); } var ms = []; for(var i = 0; i < 10; i ) { ms.push(new M( Math.random() * 400 - 200, Math.random() * 400 - 200, Math.random() * 400 - 200)); } requestAnimationFrame(function loop() { requestAnimationFrame(loop); ctx.clearRect(0, 0, w, h); for(var i = 0; i < ms.length; i ) { var m = ms[i]; m.update(); prj(m); update(m, m.list); } }); })(); [removed] 这是一款基于HTML5 Canvas绘制的炫酷3D线条延伸动画特效,多彩颜色变幻,非常漂亮!

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值