Chinaunix首页 | 论坛 | 博客
  • 博客访问: 835812
  • 博文数量: 372
  • 博客积分: 10063
  • 博客等级: 中将
  • 技术积分: 4220
  • 用 户 组: 普通用户
  • 注册时间: 2012-02-24 11:36
文章分类

全部博文(372)

文章存档

2012年(372)

分类: 虚拟化

2012-04-07 20:14:50

好了,让各位久等了,我们来看一下如何通过这三种简单图形吧。

首先我们来学习几个通用方法
设置绘图
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,基本图形的绘制就到这里吧,我们下期见,请关注

阅读(765) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~