程序猿阵线联盟-汇总各类技术干货让前端飞Web前端之路

简单的Canvas

2017-08-28  本文已影响62人  ComfyUI
  1. 基本用法
<canvas id="drawing" width="200" height="200">如果浏览器不支持canvas,则会显示这里的信息</canvas>
var drawing = document.getElementById("drawing");
var context = drawing.getContext("2d");
  1. 2d上下文
var drawing = document.getElementById("drawing");

//确定浏览器支持<canvas>元素
if(drawing.getContext) {
  //取得2d上下文对象引用
  var context = drawing.getContext("2d");

  //填充个红矩形
  context.fillStyle = "red";
  context.fillRect(0,0,100,100);

  //描边个绿矩形
  context.strokeStyle= "green";
  context.strokeRect(30,30,100,100);

  //在两个矩形重叠的地方清除一个小矩形
  context.clearRect(20,20,50,50)
}

效果:

var drawing = document.getElementById("drawing");

//确定浏览器支持<canvas>元素
if(drawing.getContext) {
  //取得2d上下文对象引用
  var context = drawing.getContext("2d");
  //开始路径
  context.beginPath();
  //绘制外圆
  context.arc(100,100,99,0,2*Math.PI,false);
  //绘制内圆
  context.moveTo(194,100);
  context.arc(100,100,94,0,2*Math.PI,false);
  //绘制分钟
  context.moveTo(100,100);
  context.lineTo(100,15);
  //绘制时钟
  context.moveTo(100,100);
  context.lineTo(35,100);
  //描边路径
  context.strokeStyle = "blue";
  context.stroke();
}

ps:上面画内圆时用的moveTo()方法,其实就是“提笔”,首先用“笔”画了个外圆,然后将笔提起来,放到内圆的一点上,然后再画。


时钟.png

参考学习

《高程》

上一篇 下一篇

猜你喜欢

热点阅读