简单的Canvas
- 基本用法
- 要使用<canvas>元素，必须先设置其width和height属性，指定可以绘图区域大小。
<canvas id="drawing" width="200" height="200">如果浏览器不支持canvas，则会显示这里的信息</canvas>- 要在这块画布（canvas）上绘图，需要取得绘图上下文。而绘图上下文对象的引用，需要调用getContext()方法并传入上下文名字。传入“2d”，就可以取得2d上下文对象。
var drawing = document.getElementById("drawing");
var context = drawing.getContext("2d");- 2d上下文
- 填充和描边 两个属性： fillStyle：填充；就是用指定的样式填充图像。 strokeStyle：描边；就是只在图形边缘画线。
- 绘制矩形 矩形是唯一一种可以直接在2d上下文中绘制的形状。 fillRect()：与上文的填充属性fillStyle连用，是“涂”。 strokeRect() : 与上文的描边属性strokeStyle连用，是“画”。 clearRect()：清除画布上的矩形区域。 这三个方法都能接受4个参数：矩形的x坐标，矩形的y坐标，矩形的宽度，矩形的高度。
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)
}效果：
- 绘制路径 ①首先要调用下beginPath()方法，表示要开始绘制新路径了。 ②然后有以下方法来实际的绘制路径： arc(x坐标，y坐标，弧形半径、起始角度(弧度)，结束角度(弧度)，布尔值(表示是否按逆时针方向计算) ) moveTo(x，y)；将绘图游标移动到(x,y)坐标上，不画线。这里的绘图游标可以理解为就是画笔，我移动下画笔，换个位置画画。 lineTo(x，y)；从上一点开始绘制一条直线，到(x,y)为止。 等等。。（完整的方法可以去查） 下面用这几个方法画个时钟：
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
参考学习：
《高程》
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017.08.28 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读