html5 canvas入门帖 |
| |
canvas是html5新增的一个专用于图形处理的标签，利用canvas可以实现大部分图形操作
canvas的一些基本操作与其他图形编程工具类似，包含：各种形状的边框、路径绘制和填充，画布属性调整，样式调整等
下面逐步引入，笔者叙述的尽量详细，争取让一个新手能轻松理解
一、canvas环境构建
进入html编辑环境即可。
在body中添加canvas标签
[html]
<body>
<canvas id="canvas1" width="400px" height="200px"></canvas><br />
</body>
这样就完成了一个canvas的铺设,但这样是远远不够的，在运用canvas之前还必须做一些工作，包括变量关联和上下文的创建
[html]
$(document).ready(
function(){
var canvas=$("#canvas1"); //变量关联
var context=canvas.get(0).getContext("2d"); //创建上下文
context.clearRect(0,0,400,200); //画矩形
<span style="white-space:pre"> </span>}
);
二、画图的方法有多种，几种典型方法如下
[html]
context.fillRect(20,20,100,100); //填充
context.strokeRect(130,20,100,100); //边框
[html]
<span style="white-space:pre"> </span>context.beginPath();
context.strokeRect(30,100,50,50);//勾画路径
context.closePath();
context.stroke();//路径的使用方式
[html]
<span style="white-space:pre"> </span>context.beginPath();
context.arc(155,125,20,0,Math.PI*1.5,false);//画圆（扇）
//context.arc(x,y,radius,开始角度，结束角度,方向是否逆时针)
context.closePath();
context.fillStyle="#ffff00";//调整样式
context.fill();
[html]
<span style="white-space:pre"> </span>var text="hello world!";
context.font="35px italic serif";//设置字体属性
context.fillText(text,60,100);
[html]
<span style="white-space:pre"> </span>canvas.attr("width",400);//修改画布大小
canvas.attr("height",20);
[html]
context.clearRect(0,0,canvas.width(),canvas.height());//修改画布大小
三、实例，下面提供一个完整的各种canvas基础应用的demo源码
[html]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>canvas简明教程（一）</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
<script language="javascript">
$(document).ready(
function(){
init();
}
);
function clear1(){
var canvas=$("#canvas1"); //变量关联
var context=canvas.get(0).getContext("2d");
context.clearRect(0,0,400,200);
}
function clear2(){
var canvas=$("#canvas2"); //变量关联
var context=canvas.get(0).getContext("2d");
context.clearRect(0,0,400,200);
}
function clear3(){
var canvas=$("#canvas3"); //变量关联
var context=canvas.get(0).getContext("2d");
context.clearRect(0,0,400,200);
}
function clear4(){
var canvas=$("#canvas4"); //变量关联
var context=canvas.get(0).getContext("2d");
context.clearRect(0,0,canvas.width(),canvas.height());
}
function clear5(){
var canvas=$("#canvas5"); //变量关联
var context=canvas.get(0).getContext("2d");
canvas.attr("width",$(window).get(0).innerWidth);
canvas.attr("height",$(window).get(0).innerHeight);
context.fillRect(0,0,canvas.width(),canvas.height());
}
function init(){
var canvas=$("#canvas1"); //变量关联
var context=canvas.get(0).getContext("2d"); //创建上下文，学过MFC图形处理的应该很熟悉，即在内存中创建一个相匹配的环境
context.fillRect(20,20,100,100);
context.strokeRect(130,20,100,100);
canvas=$("#canvas2");
var context=canvas.get(0).getContext("2d"); //这一句是必须的，否则绘制结果还停留在前面的元素
context.beginPath();
context.moveTo(30,30);
context.lineTo(300,60);
context.closePath();
context.stroke();
context.beginPath();
context.strokeRect(30,100,50,50);
context.closePath();
context.stroke(); //这个stroke是笔的意思，只绘制
context.beginPath();
context.arc(155,125,20,0,Math.PI*1.5,false);
//context.arc(x,y,radius,开始角度，结束角度,方向是否逆时针)
context.closePath();
context.fill();//这个fill是全填充
canvas=$("#canvas3");
var context=canvas.get(0).getContext("2d"); //这一句是必须的，否则绘制结果还停留在前面的元素
context.lineWidth=5;
context.strokeStyle="#ff0000"; //一经改变永久生效
context.beginPath();
context.strokeRect(30,100,50,50);
context.closePath();
context.stroke(); //这个stroke是笔的意思，只绘制
context.beginPath();
context.arc(155,125,20,0,Math.PI*1.5,false);
//context.arc(x,y,radius,开始角度，结束角度,方向是否逆时针)
context.closePath();
context.fillStyle="#ffff00";
context.fill();//这个fill是全填充
canvas=$("#canvas4");
var context=canvas.get(0).getContext("2d"); //这一句是必须的，否则绘制结果还停留在前面的元素
var text="hello world!";
context.font="35px italic serif";
context.fillText(text,60,100);
canvas=$("#canvas5");
var context=canvas.get(0).getContext("2d"); //这一句是必须的，否则绘制结果还停留在前面的元素
canvas.attr("width",400);
canvas.attr("height",20);
}
</script>
<style>
body { margin:0 auto;}
canvas {border:red 1px dashed;}
</style>
</head>
<body>
<input type="button" onClick="init()" value="点击全部重绘" />
<h6>canvas 1 矩形绘制：</h6>
<canvas id="canvas1" width="400px" height="200px"></canvas><br />
<input type="button" onClick="clear1()" value="点击擦掉" />
<h6>canvas 2 路径绘制：</h6>
<canvas id="canvas2" width="400px" height="200px"></canvas><br />
<input type="button" onClick="clear2()" value="点击擦掉" />
<h6>canvas 3 颜色和线宽调整：</h6>
<canvas id="canvas3" width="400px" height="200px"></canvas><br />
<input type="button" onClick="clear3()" value="点击擦掉" />
<h6>canvas 4 文本绘制：</h6>
<canvas id="canvas4" width="400px" height="200px"></canvas><br />
<input type="button" onClick="clear4()" value="点击擦掉" />
<h6>canvas 5 测试改动一个canva属性值并抹黑</h6>
<canvas id="canvas5" width="400px" height="20px"></canvas><br />
<input type="button" onClick="clear5()" value="点击变大并抹黑" />
<br /><br />
<input type="button" onClick="init()" value="点击全部重绘" />
</body>
</html>
|
|
|
 |
 |
 |
|
|
 |
|
|
|
TEL：010-82561037
Fax: 010-82561614
QQ: 100164630
Mail：gaojian@comprg.com.cn
|
|
|
 |
|
|
