使用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>
