HTML5绘图笔记7：Path2D对象

使用Path2D对象

new Path2D();
new Path2D(path);
new Path2D(d);

例子1

<canvas id="myCanvas" width="600" height="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");  
var context = canvas.getContext('2d');  
context.fillStyle = "#EEEEFF";  
context.fillRect(0, 0, 600, 400);  
var n = 0; 
for(var i = 0; i < 10; i++){  
 var path=new Path2D();  
 path.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);  
 path.closePath();  
 context.fillStyle = 'rgba(255, 0, 0, 0.25)';  
 context.fill(path);  
} 
</script>

在这里插入图片描述
例子2

<canvas id="myCanvas" width="300" height="200"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");  
var context = canvas.getContext('2d');  
var path1=new Path2D();    
path1.rect(10,10,100,100);
var path2=new Path2D(path1);
path2.moveTo(220,60);
path2.arc(170,60,50,0,2*Math.PI);
context.stroke(path2);
</script>

在这里插入图片描述
例子3

<canvas id="myCanvas" width="300" height="200"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext('2d');  
var path1=new Path2D();    
path1.rect(10,10,100,100);
var path2=new Path2D();
path2.moveTo(220,60);
path2.arc(170,60,50,0,2*Math.PI);
path2.addPath(path1);
context.stroke(path2);
</script>

在这里插入图片描述
例子4

<canvas id="myCanvas" width="200" height="200"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext('2d');  
var path1=new Path2D("M10 10 h 80 v 80 h -80 Z ");    
context.fill(path1); 
</script>

在这里插入图片描述

来源：CSDN

作者：YanHilin

链接：https://blog.csdn.net/weixin_40119412/article/details/104132542

标签

var

html5

canvas