html5 canvas绘制简单图形代码,HTML5 Canvas简单图形绘制[矩形、圆形、线]

好了，让各位久等了，我们来看一下如何通过 Javascript绘制矩形，圆形，线这三种简单图形吧。

先来看一下Dome演示

首先我们来学习几个通用方法

设置绘图

fillStyle:[value];填充颜色，这个值可以是颜色的值，可以是16进制值，也可以是rgb或rgba色彩；

strokeStyle:[value];线(边框)颜色，取值同上；

lineWidth:[value];线宽度，是一个数值；

fillRect:矩形填充方法；

strokeRect:矩形画线方法。

我们就用这些属性绘制一个新的矩形吧。

[javascript]

//得到画布上下文，上节已讲，在此不多说

function draw() {

canvas = document.getElementById("canvas");

if (canvas.getContext) { //检测浏览器是否兼容

ctx = canvas.getContext("2d"); //你的canvas代码在这里

return ctx;

}

return null;

}

//画矩形

function juXing() {

var canvas = draw();//获得2d绘图上下文共有方法

canvas.fillStyle = "#2E81CE"; //等同于fillStyle="rgba(46,129,206,1)";

canvas.strokeStyle = "red";

canvas.lineWidth = 2;

canvas.fillRect(10, 10, 100, 120); //填充的四个参数(x,y,width,height)

canvas.strokeRect(10, 10, 100, 120); //线的四个参数(x,y,width,height)

}

[/javascript]

使用路径

beginPath():打开路径

绘制弧形(线)：arc(x,y,radius[半径],startAngle[开始弧度],endAngle[结束弧度],anticlockwise[true顺时针绘制,false逆时针绘制])，

这里我们通常会用到Math.PI来设定弧度，顾名思义2*Math.PI即为360度；

moveTo(x,y):移动画点到x，y坐标，你可以想象为拿起画笔；

lineTo(x,y):从画点开始画线到x，y坐标，你可以想象为使用画笔；

closePath():关闭路径；

fill:填充方法；

stroke:画线方法。

下面我们来画一个圆和一组平行线

[javascript]

//画圆形

function Yuan() {

var canvas = draw();

canvas.fillStyle = "#2E81CE"; //等同于fillStyle="rgba(46,129,206,1)";

canvas.beginPath();

canvas.arc(250, 60, 50, 0, 2 * Math.PI, true);

canvas.closePath();

canvas.fill();

}

//画线

function Xian() {

var canvas = draw();

canvas.strokeStyle = "red";

canvas.lineWidth = 5;

canvas.beginPath();

canvas.moveTo(450, 60);//设置起点

canvas.lineTo(600, 60);//画线

canvas.moveTo(450, 160);//拿起画笔到新坐标

canvas.lineTo(600, 160);//画线

canvas.closePath();

canvas.stroke();

}

[/javascript]

最后看一个基本方法， 擦除

clearRect(x,y,width,heigth);要擦除以x，y坐标为起点，width,heigth为长宽的矩形区域里的内容

[javascript]

function Ca() {

var canvas = draw();

canvas.clearRect(0, 0, canvas.width, canvas.height);

}

[/javascript]

Ok，基本图形的绘制就到这里吧，我们下期见，请关注 http://qdgcs.co.cc

本文链接