HTML5 的绘图支持- canvas
Canvas
HTML5新增了一个canvas元素，它是一张空画布，开发者需要通过JavaScript脚本进行绘制。
在canvas上绘图，经过如下3步
（1） 获取canvas元素对应的DOM对象。
（2）调用canvas对象的getContext（）方法，该方法返回CanvasRenderingContext2D对象，该对象即可绘制图形。
（3）调用CanvasRenderingContext2D对象的方法绘图。
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.paint-intro{
width: 300px;
height: 180px;
border: 1px solid #000;
}
</style>
<script type="text/javascript">
window.onload=function(){
var canvas = document.getElementById("paint");
var ctx=canvas.getContext('2d');
//设置填充颜色
ctx.fillStyle='#f00';
//绘制矩形
ctx.fillRect(30,40,80,100);
}
</script>
</head>
<body>
<h2>画图入门</h2>
<canvas id="paint" class="paint-intro"></canvas>
</body>
学习canvas的重点是CanvasRenderingContext2D对象。
Canvas对象的getContext（string context）方法将返回一个绘图API。目前该方法只支持‘2d’字符串为参数，该方法返回一个CanvasRenderingContext2D对象。
绘制几何图形
1.fillRect(),填充一个矩形区域
2.strokeRect()，绘制一个矩形区域
<canvas id="paintRectangle" class="paint-rectangle"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("paintRectangle");
var ctx=canvas.getContext('2d');
ctx.fillStyle='#f00';
//填充一个矩形
ctx.fillRect(30,20,120,30);
//设置填充颜色
ctx.fillStyle='#ff0';
ctx.fillRect(60,40,120,30);
//设置线条颜色
ctx.strokeStyle='#0000ff';
//设置线条宽度
ctx.lineWidth=10;
//设置一个矩形边框
ctx.strokeRect(30,80,120,40);
//设置线条颜色
ctx.strokeStyle='#0ff';
//设置线条宽度
ctx.lineJoin="round";
//绘制一个矩形边框
ctx.strokeRect(80,100,120,40);
//设置线条颜色
ctx.strokeStyle='#f0f';
//设置线条宽度
ctx.lineJoin='bevel';
//绘制一个矩形边框
ctx.strokeRect(130,110,120,30);
</script>
绘制文字
1.fillText(),填充字符串
2.strokeText()，绘制字符串边框
<canvas id="paintText" width="600" height="280" style="border: 1px solid #000;"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("paintText");
var ctx=canvas.getContext('2d');
ctx.fillStyle='#00f';
ctx.font='italic 50px 隶书';
ctx.textBaseline='top';
//填充字符串
ctx.fillText('填充字符串',0,0);
ctx.strokeStyle='#f0fs';
ctx.font='bolf 50px 宋体';
//填充字符串
ctx.strokeText('填充字符串',0,50);
</script>
设置阴影
shadowBlur：设置阴影的模糊度
shadowColor：设置阴影的颜色
shadowOffsetX： 设置阴影的X方向偏移量
shadowOffsetY： 设置阴影的Y方向偏移量
<canvas id="paintText" width="600" height="280" style="border: 1px solid #000;"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("paintText");
var ctx=canvas.getContext('2d');
ctx.shadowBlur=5.6;
ctx.shadowColor='#222';
ctx.shadowOffsetX=10;
ctx.shadowOffsetY=-6;
ctx.fillStyle='#00f';
ctx.font='italic 50px 隶书';
ctx.textBaseline='top';
//填充字符串
ctx.fillText('填充字符串',0,0);
ctx.strokeStyle='#f0fs';
ctx.font='bolf 50px 宋体';
//填充字符串
ctx.strokeText('填充字符串',0,50);
</script>
使用路径
<canvas id="paintArc" width="400" height="280" style="border: 1px solid #000;"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("paintArc");
var ctx=canvas.getContext('2d');
for(var i=0;i<10;i++){
ctx.beginPath();
ctx.arc(i*25,i*25,(i+1)*8,0,Math.PI*2,true);
ctx.closePath();
ctx.fillStyle='rgba(255,0,255,'+(10-i)*0.1+')';
ctx.fill();
}
</script>
本文参考《疯狂HTML5/CSS3/JavaScript讲义》
