canvas绘图 (重点)
网页中的实时走势图,抢红包,网页游戏,地图应用..
(1)SVG 绘图 2D矢量绘图技术，2000年出现,后纳入h5
(2)Canvas绘图 2D位图绘图技术，H5提出
(3)WebGL绘图 3D绘图技术，尚未纳入H5标准
| Canvas绘图难点所在: (1)坐标系 (2)单词比较多
|
Canvas画布:画布是H5提供的绘图基础
<canvas width=”500” height=”400”>
您的浏览器版本太低，请升级
</canvas>
Canvas标签在浏览器中默认是300*150的inine-block,画布宽度高度属性只能用js/属性来赋值.
不能用CSS样式赋值.
每个画布上有且只有一个”画笔”对象—使用该对象来绘图
var ctx = canvas.getContext(“2d”); 得到画布的画笔对象
(1)使用canvas绘制矩形(长方形)
矩形定位点在自己左上角
ctx.lineWidth = 1; 描边宽度(边线宽度)
ctx.fillStyle = “#999”; 填充样式
ctx.strokeStyle = “#000”; 描边样式
ctx.fillRect(x,y,w,h); 填充矩形
ctx.strokeRect(x,y,w,h); 描边矩形
ctx.clearRect(x,y,w,h); 清除矩形范围内所有图形
练习:左上角 右上角 左下角 右下角 居中
绘制5个矩形，大小100*80 填充，颜色不同
ex：不断碰撞移动的方块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<canvas id="ca" width="600px" height="600px">
</canvas>
<script>
//获取画布
var ca=document.getElementById("ca")
//获取画笔
var ctx=ca.getContext("2d")
//绘制矩形
ctx.fillStyle="red";
ctx.fillRect(0,0,100,80)
ctx.fillStyle="black"
ctx.fillRect(600-100,0,100,80)
ctx.fillStyle="#ddd"
ctx.fillRect(0,600-80,100,80)
ctx.fillStyle="#ccc"
ctx.fillRect(600-100,600-80,100,80)
ctx.fillStyle="#aff"
ctx.fillRect(300-50,300-40,100,80);
ctx.clearRect(0,0,600,600);
ctx.strokeStyle="#000";
//控制物体左右移动
var x=0
var y=0
//设置一个变量来控制物体的移动方向
var xdirection=1
var ydirection=1
var time=setInterval(function () {
ctx.clearRect(0,0,600,600)
x+=1*xdirection
y+=1*ydirection
ctx.strokeRect(x,y,100,80)
if(x>500){
xdirection=-xdirection
}else if(x<0){
xdirection=-xdirection
}
if(y>520){
ydirection=-ydirection;
}else if(y<0){
ydirection=-ydirection
}
},0.01)
//控制物体上下移动
// var y=0
// var ydirection=1
// var time2=setInterval(function () {
// ctx.clearRect(0,0,600,600);
// y+=1*ydirection;
// ctx.strokeRect(0,y,100,80)
// if(y>520){
// ydirection=-ydirection;
// }else if(y<0){
// ydirection=-ydirection
// }
// },1)
</script>
</body>
</html>
(2)使用canvas绘制文本
ctx.textBaseline = “alphabetic” 文本基线（默认值）
ctx.font = “12px sans-serif”; 文本大小和字体
ctx.fillText(str,x,y); 填充一段文本
ctx.strokeText(str,x,y) 描边一段文本
ctx.measureText(str); 测量文本宽度
ex:更改文本基线为top（可以使得字母可见）（常用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="c2" width="600px" height="600px" style="background-color: yellow">
您的浏览器版本太低,请及时升级
</canvas>
<script>
var str="abcxyz"
var c2=document.getElementById("c2")
var ctx=c2.getContext("2d")
//设置基准线
ctx.textBaseline="top"
ctx.font="39px sans-serif"
//绘制填充矩形
ctx.fillText(str,0,0)
</script>
</body>
</html>
练习:左上角 右上角 左下角 右下角 居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="c2" width="600px" height="600px" style="background-color: yellow">
您的浏览器版本太低,请及时升级
</canvas>
<script>
var str="abcxyz"
var c2=document.getElementById("c2")
var ctx=c2.getContext("2d")
//设置基准线
ctx.textBaseline="top"
ctx.font="39px sans-serif"
//读取文本的宽
var w=ctx.measureText(str).width
//绘制填充矩形
ctx.fillText(str,0,0)
//右上角
ctx.fillText(str,600-w,0)
//右下角
ctx.fillText(str,600-w,600-39)
//左下角
ctx.fillText(str,0,600-39)
//中间
ctx.fillText(str,300-w/2,300-39/2)
</script>
</body>
</html>
左右移动文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="c2" width="600px" height="600px" style="background-color: yellow">
您的浏览器版本太低,请及时升级
</canvas>
<script>
var str="abcxyz"
var c2=document.getElementById("c2")
var ctx=c2.getContext("2d")
//设置基准线
ctx.textBaseline="top"
ctx.font="39px sans-serif"
//读取文本的宽
var w=ctx.measureText(str).width
var x=0;
var xdirection=1;
var timer=setInterval(function(){
//清除画布
ctx.clearRect(0,0,600,600)
//修改x
x+=1*xdirection
//绘制文本
ctx.fillText(str,x,0)
//判断
if(x>600-w){
xdirection=-xdirection
}else if(x<0){
xdirection=-xdirection
}
},10)
</script>
</body>
</html>