canvas绘制空心矩形的方法是,html canvas画圆

  canvas绘制空心矩形的方法是,html canvas画圆

  这里给大家分享的是一个学习帆布的时候做的画空心圆与实心圆的练习题,非常简单。

  canvas id= canvas width= 500 height= 500 style= background-color:yellow;/画布复制代码代码如下:

  var canvas=文档。getelementbyid(“canvas”);

  var cxt=画布。获取上下文(“2d”);

  //画一个空心圆

  cxt。begin path();

  cxt.arc(200,200,50,0,360,false);

  cxt。线宽=5;

  cxt.strokeStyle= green

  cxt。笔画();//画空心圆

  cxt。关闭路径();

  //画一个实心圆

  cxt。begin path();

  cxt.arc(200,100,50,0,360,false);

  cxt.fillStyle= red//填充颜色,默认是黑色

  cxt。fill();//画实心圆

  cxt。关闭路径();

  //空心和实心的组合

  cxt。begin path();

  cxt.arc(300,300,50,0,360,false);

  cxt.fillStyle= red

  cxt。fill();

  cxt.strokeStyle= green

  cxt。笔画();

  cxt。关闭路径();

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: