几何图形分两种,一种是由线段构成的,一种是由弧线构成的,下面将利用canvas绘制一个矩形和圆形。

canvas

canvas是HTML5引入的一个定义图形的标签,相当于一个容器,所以图形的绘制还必须用脚本来完成。

绘制矩形

html

<canvas id="canvas">你的浏览器居然不支持Canvas?</canvas>

js

var canvas = document.getElementById("canvas");
//设置画布的尺寸,默认宽高为300
canvas.width = 1200;
canvas.height = 1200;
canvas.style.border = "1px solid #ddd";
//开始绘制
var context=canvas.getContext("2d");

//方法一 使用连线的方式
context.beginPath();
context.moveTo(50,50);//开始绘制点坐标
context.lineTo(250,50);//第二个连接点坐标
context.lineTo(250,250);//第三个连接点坐标
context.lineTo(50,250);第四个连接点坐标
context.lineTo(50,50);//闭合
context.closePath(); //使用closePath闭合图形,(设置了lineWidth导致左上角有一个缺口)
context.lineWidth = 10;//线条宽度
context.strokeStyle = "red";//线条颜色
context.stroke();//确认线条颜色
context.fillStyle = "blue";//填充背景色
context.fill();//确认填充背景色

//方法二  fillRect()方法绘制矩形
context.beginPath();
context.strokeStyle = "red";//线条颜色
context.lineWidth = 10;//线条颜色
context.fillStyle = "blue";//填充背景色
context.fillRect(100,100,200,200);//四个参数,位置x y 矩形的宽 高
context.strokeRect(100,100,200,200);

这里写图片描述

绘制圆形

使用canvas圆弧api:context.arc(x,y,r,sAngle,eAngle,counterclockwise)来完成;
参数描述:
x 是圆的中心的 x 坐标。
y 是圆的中心的 y 坐标。
r 是圆的半径。
sAngle 起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)。
eAngle 结束角,以弧度计。
counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针。

js

var canvas = document.getElementById("canvas");
//设置画布的尺寸,默认宽高为300
canvas.width = 1200;
canvas.height = 1200;
canvas.style.border = "1px solid #ddd";
//开始绘制
var context=canvas.getContext("2d");
context.beginPath();
context.fillStyle = "green";//填充背景色
context.arc(50,50,50,0,2*Math.PI);//Math.PI----π
context.fill();
context.stroke();

这里写图片描述

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐