1、canvas使用
基本用法
<body>
<h2>画图入门</h2>
<!---设置canvas的高度和宽度--->
<canvas id="mc" width="400" height="280" style="border:1px solid black"> </canvas>
<script type="text/javascript">
<!---获取id为mc的DOM对象-->
var canvas=document.getElementById('mc');
var ctx=canvas.getContext('2d');
ctx.fildStyle='#f00';
ctx.fillRect(30,20,120,60);
ctx.fillStyle="#ff0";
<!---填充一个矩形区域-->
ctx.strokeRect(80,60,120,60);
ctx.storkeStyle="#00f";
<!---设置线条宽度-->
ctx.lineWidth=10;
<!---绘制一个矩形边框-->
ctx.strokeRect(30,130,120,60);
ctx.strokeStyle="#0ff";
<!---线条连接风格-->
ctx.lineJoin="round";
ctx.strokeRect(80,160,120,60);
ctx.storkeStyle="#f0f";
ctx.lineJoin="bevel";
ctx.strokeRect(130,190,120,60);
</script>
</body>
执行结果为:
点线模式
<html>
<body>
<h2>点线模式</h2>
<canvas id="mc" width="400" height="280"style="border:1px solid black">
</canvas><p>
<select id="lineDash" onchange="changeLineDash(this.value);">
</select><p>
<input type="range"id="lineDashOffset" style="width:300px"
onchange="changeLineDashOffset (this.value);"/>
<script type="text/javascript">
var lineDashArr=[[2,2],
[2.0,4.0,2.0],
[2.0,4.0,6.0],
[2.0,4.0,2.0,6.0],
[2.0,4.0,4.0],
[2.0,2.0,4.0,6.0,10.0]];
var phaseMax=20;
var phaseMin=-20;
var lineDashEle=document.getElementById("lineDash");
for(var i=0;i<lineDashArr.length;i++){
lineDashEle.options[i]=new Option(lineDashArr[i],i);
}
lineDashEle.options[0].selected=true;
var lineDashOffsetEle=document.getElementById("lineDashOffset");
lineDashOffsetEle.max=phaseMax;
lineDashOffsetEle.min=phaseMin;
lineDashOffsetEle.step=0.1;
lineDashOffsetEle.value=0;
var lineDash=lineDashArr[0];
var lineDashOffset=0;
function draw(){
var canvas=document.getElementById('mc');
var ctx=canvas.getContext('2d');
ctx.fileStyle="#fff";
ctx.fileRect=(0,0,400,280);
ctx.strokeStyle="#f0f";
ctx.lineWidth=2;
ctx.setLineDash(lineDash);
ctx.lineDashOffset=lineDashOffset;
ctx.strokeRect(40,60,120,120);
ctx.beginPath();
ctx.arc(300,120,60,60,0,Math.PI*2,true);
ctx.moveTo(30,30);
ctx.lineTo(360,30);
ctx.moveTo(200,50);
ctx.lineTo(200,240);
ctx.closePath();
ctx.stroke();
}
function changeLineDash(i){
lineDash=lineDashArr[i];
draw();
}
function changeLineDashOffset(val)
{
lineDashOffset=val;
draw();
}
draw();
</script>
</body>
</html>
运行结果为:
2、设置阴影
shadowBlur设置阴影背景
shadowColor设置阴影颜色
shadowOffsetX,shadowOffsetY设置阴影偏移量