前端基础-HTML5（绘图2）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_41442781/article/details/89163364

图形的组合

var cxt=document.getElementById(“mycanvas”);
var c=cxt.getContext(“2d”);
c.beginPath();//开始一个绘图
//一个矩形，一下叫旧图
c.rect(10,10,200,200)//设置一个矩形，在坐标10，10处创建一个200.200的矩形；
c.fillStyle="#ff0000";//设置矩形的填充色为红色；
c.fill();//真正填充的方法；

//c.globalCompositeOperation="source-over";
//默认值source-over新图部分会覆盖旧图部分
//c.globalCompositeOperation="source-atop";
//source-atop旧图全部加上和新图交叉的部分，交叉处新图部分会覆盖旧图部分

//一个圆形，又叫新图
c.beginPath();//开始绘图
c.arc(200,200,100,0,Math.PI*2,true);//圆心距左上角为200，200半径为100从0度开始
//两个180的度数，true逆时针方向绘制一个圆
c.fillStyle="#00ff00";//设置圆形的填充色为绿色；

c.fill();//真正填充的方法；
c.closePath();

以下属性不在一一实现了
效果如下