canvas API,可以在页面上绘制出任何你想要的，非常漂亮的图形和接口，可以创造出更加丰富多彩和赏心悦目的下一代web页面
基础知识：
在页面上放置一个canvas元素，就相当于在页面上放置了一块画布，可以在其中进行图形的描绘，canvas是一个无色透明的区域，需要利用javascript编写在其中进行绘画的脚本，也可以理解为类似于其他开发语言中的canvas画布
在页面中放置canvas元素：
首先，因该指定的是ID，width,height三个属性，在脚本导入的地方使用<script type="text/javascript" src="script.js" charset="gb2312"></script>;通过这个语句，在页面上导入了script.js这个脚本文件，然后，使用该脚本文件，进行图形描绘；在body属性中，使用了οnlοad="draw('canvas')"语句，调用该函数中的draw函数进行图形描画
canvas元素示例：
<head>
<meta charset="utf-8">
<title>canvas元素示例</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body οnlοad="draw('canvas')">
<h1>canvas元素示例</h1>
<canvas id="canvas" width="400" height="300"/></canvas>
</body>绘制矩形：
在script.js的这个脚本文件中，只有draw一个函数，这个函数的功能是把canvas画布的背景用浅蓝色涂满，然后画出一个红色正方形，边框为蓝色
步骤：
1.取得canvas元素
首先通过document.getElementById等方法取得canvas对象，因为需要调整这个对象提供的方法俩进行图形绘制
2.取得上下文
进行图形绘制的时候，需要用到图形上下文（graphics context）,图形上下文中是一个封装了很多绘图功能的对象，需要使用canvas对象的getContext方法来获得图形上下文，在draw函数中，将参数设定为2d
3.填充与绘制边框
填充（fill)绘制边框（stroke）填充是指填满图形内部，绘制边框是指不填满图形内部，只是绘制图形的外廓，canvas元素结合这两种方式来绘制矩形
4.设定绘图样式
所谓绘图的样式，主要是针对图形的颜色而言的，但是并不限于图形的颜色; 设定填充图形的样式fillStyle样式------填充的样式，在该属性中填入填充的颜色值；
strokeStyle设定图形边框的样式---------图形边框的样式，在该属性中填入边框的颜色值
5.指定线宽
使用图形上下文对象的lineWidth属性设置图形边框的宽度，在绘制图形的时候，任何直线都可以通过lineWidth属性来指定直线的宽度
6.指定颜色值
绘图时填充的颜色或者边框的颜色分别通过fillStyle属性或者strokeStyle属性来指定，颜色值使用的是普通样式表中使用的颜色值，例如red或者blue这种颜色名或者#FF0000
这种十六进制的颜色值，也可以通过rgb(红色值，绿色值，蓝色值)或者rgba（红色值，绿色值，蓝色值，透明度）这种rgb函数或者rgba函数来指定颜色的值
7.绘制矩形
分别使用fillRect方法与strokeRect方法来填充矩形和绘制矩形边框，这两个方法的定义如下面
context.fillRect(x,y,width,height)
context.strokeRect(x,y,width,height)
这里的context指的是图形上下文对象，这两个方法使用同样的参数，x是指矩形起点的横坐标，y是指矩形起点的纵坐标，坐标原点为canvas画布的最左上角，width指的是矩形的长度，height指的是矩形的高度-----通过这四个参数，矩形的大小同时也就被决定了
绘制矩形
function draw(id){
var canvas=document.getElementById(id);
if(canvas==null)
return false;
var context=canvas.getContext('2d');
context.fillStyle="#EEEEFF";
context.fillReact(0,0,400,300);
context.fillStyle="red";
context.strokeStyle="blue";
context.lineWidth=1;
context.fillReact(50,50,100,100);
context.strokeReact(50,50,100,100);
}绘制圆形：
要想绘制其他图形，需要使用路径，同样的，绘制开始的时候还是要取得图形上下文，然后执行下面的步骤
开始创建路径；创建图形的路径；路径创建完成后，关闭路径；设定绘制样式，调用绘制方法，绘制路径；也就是首先调用路径来勾勒图形轮廓，然后设置颜色，进行绘制
开始创建路径：
首先使用图形上下文对象的beginPath方法，方法的定义为context.beginPath()；这个方法不使用参数，通过调用这个方法，开始路径的创建，在几次循环地创建路径的过程中，每次开始创建的时候都要使用beginPath函数
创建圆形路径：
创建圆形路径的时候，需要使用图形上下文的arc方法，这个方法的定义如下所示context.arc(x,y,radius,startAngle,endAngle,anticlockwise);这个方法使用了六个参数，x是绘制圆形的起点横坐标，Y是绘制圆形的起点纵坐标，radius是圆形半径，startAngle是开始角度，endAngle是结束角度，anticlockwsie为是否按顺时针方向进行绘制；在canvas API中，绘制半径与弧时指定的参数为开始弧度和结束弧度，如果喜欢使用角度，可以按照这个方法将角度转换为弧度
var radians=degrees*math.PI/180;其中math.PI表示角度为180，math.PI*2表示角度为360度;arc方法不仅可以用来绘制圆形，还可以用来绘制圆弧，因此使用的时候必须要指定开始角度和结束角度，因为这两个角度决定了弧度。anticlockwise参数为一个布尔值的参数，参数值为true的时候，是按照顺时针进行绘制，参数值为false的时候，是按照逆时针进行绘制
关闭路径：
路径创建完成后，路径的创建工作就完成了，但这只是路径创建完毕而已，还没有真正绘制任何图形
设定绘制样式，进行图形绘制：
context.fillStyle='rgba(255,0,0,0.25)'
context.fill();绘制图形的时候，还使用了fill方法,也可以使用stroke方法，这两个方法的功能是"填充图形"和"绘制图形边框；"因为路径已经决定了图形的大小，所以就不需要在这个方法中使用参数来指定图形的大小了
function draw(id)
{
var canvas=document.getElementById('2d');
if(canvas==null)
return false;
var context=canvas.getContext('2d');
context.fillStyle='#EEEEFF';
context.fillReact(0,0,400,300);
var n=0;
for(var i=0;i<10;i++)
{
context.beginPath();
context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
context.closePath();
context.fillStyle='rgba(255,0,0,0.25)';
context.fill();
}
3729
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
