html5 canvas学习--裁切路径

最新推荐文章于 2023-06-02 12:58:15 发布

xiaopengyaonixi

最新推荐文章于 2023-06-02 12:58:15 发布

阅读量645

点赞数 1

分类专栏： Html5

Html5 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<canvas id="myCanvas" style="border:solid 1px;" width="300" height="300"></canvas>
	<script type="text/javascript">
		function draw(){
			var ctx = document.getElementById("myCanvas").getContext("2d");
			ctx.fillStyle="black";
			ctx.fillRect(0,0,300,300);
			ctx.fill();
			// 绘制圆形
			ctx.beginPath();
			ctx.arc(150,150,130,0,Math.PI*2,true);
			ctx.clip();
			// 变换
			ctx.translate(200,20);
			for(var i = 0;i<90;i++){
				ctx.save();
				ctx.transform(0.95,0,0,0.95,30,30);
				ctx.rotate(Math.PI/12);
				ctx.beginPath();
				ctx.fillStyle="red";
				ctx.globalAlpha="0.4";
				ctx.arc(0,0,50,0,Math.PI*2,true);
				ctx.closePath();
				ctx.fill();
			}
		}
		window.onload = function(){
			draw();
		}
	</script>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xiaopengyaonixi

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5 canvas学习--裁切路径

function draw(){ var ctx = document.getElementById("myCanvas").getContext("2d"); ctx.fillStyle="black"; ctx.fillRect(0,0,300,300); ctx.fill(); // 绘制圆形 ctx.beginPath(); ctx.arc(150
复制链接

扫一扫