1、绘制几何图形
<body>
<h2>绘制矩形</h2>
<canvas id="myCanvas" width="400" height="280" style="border:1px solid black"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle="#f00";
ctx.fillRect(30,20,120,60);
ctx.fillStyle=("#ff0");
ctx.fillRect(80,60,120,60);
ctx.strokeStyle="#00f";
ctx.lineWidth=10;
ctx.strokeRect(30,130,120,60);
//设置线条颜色
ctx.strokeStyle="#0ff";
//设置线宽
ctx.lineWidth=15;
//设置倒角形式
ctx.lineJoin="round";
ctx.strokeRect(80,160,120,60);
ctx.strokeStyle="#f0f";
ctx.lineWidth=20;
ctx.lineJoin="bevel";
ctx.strokeRect(130,190,120,60);
</script>
</body>
效果
2.绘制字符串。
《textAlign:设置绘制字符串的水平对齐方式，该属性支持start,end,left,right,center等属性。
textBaseAlign:设置绘制字符串的垂直对齐方式，该属性支持top,hanging,middle,alphabetic,idecgraphic,bottom等属性值。
》
ctx.fillStyle="#00f";
ctx.font="italic 50px 隶书";
ctx.textBaseline="top";
//填充字符串
ctx.fillText("疯狂的我",0,0);
ctx.strokeStyle="#f0f";
ctx.font="bold 45px 宋体";
//绘制字符串边框
ctx.strokeText("清凉summer来吧!",0,50);
//模糊度
ctx.shadowBlur=5.6;
//阴影颜色
ctx.shadowColor="#222";
//阴影X方向偏移
ctx.shadowOffsetX=10;
//阴影Y方向偏移
ctx.shadowOffsetY=-6;
ctx.fillStyle="#00f";
ctx.font="italic 50px 隶书";
ctx.textBaseline="top";
//填充字符串
ctx.fillText("疯狂的我",0,0);
ctx.shadowBlur=2.6;
ctx.shadowColor="#30f";
ctx.shadowOffsetX=-10;
ctx.shadowOffsetY=6;
ctx.strokeStyle="#f0f";
ctx.font="bold 45px 宋体";
//绘制字符串边框
ctx.strokeText("清凉summer来吧!",0,50);
3、放图形
var image=new Image();
image.src="girl.png";
image.onload=function(){
//位置(保持原大小)
ctx.drawImage(image,20,10);
//位置，缩放
ctx.drawImage(image,180,10,76,100);
var sd=50,sh=65;
//原图开始截取位置，截取的宽高，挖取的图放在canvas的位置，缩放
ctx.drawImage(image,38,6,sd,sh,265,10,sd*2,sh*2);
}
4、坐标系统的使用
ctx.fillStyle="#f0f";
//把原来(0,0)移动到(X,X)
ctx.translate(30,200);
for(i=0;i<50;i++){
ctx.translate(50,50);
//缩放坐标系统
ctx.scale(0.93,0.93);
//旋转坐标系统
ctx.rotate(-Math.PI/10);
ctx.fillRect(0,0,150,75);
}
。。。。。。
