创建阴影:
<script type="text/javascript">
function draw(){
var ctx=document.getElementById("myCanvas").getContext('2d');
//设置阴影
ctx.shadowOffsetX=3;
ctx.shadowOffsetY=3;
ctx.shadowBlur=2;
ctx.shadowColor='rgba(0,0,0,0.5)';
//绘制矩形
ctx.fillStyle='#33ccff';
ctx.fillRect(20,20,300,60);
ctx.fill();
//绘制文本
ctx.font="45px 黑体";
ctx.fillStyle='#ffffff';
ctx.fillText('我和我的祖国',30,64)
}
window.οnlοad=function(){
draw();
}
</script>
<canvas id="myCanvas" width="400" height="200"></canvas>
绘制文字: fillText()和strokeText()
<script type="text/javascript">
//绘制文字使用的是 fillText()和strokeText()
// ctx.fillText(text,x,y,[maxWidth]); 字符串、xy坐标、maxWidth(显示的最大宽度,可选)
function draw(){
var ctx=document.getElementById("myCanvas").getContext('2d');
ctx.font="italic 35px 黑体";
ctx.fillStyle='red';
ctx.fillText("我和你心连心我和你心连心",30,60,200);
ctx.font="bold 35px 宋体";
ctx.fillStyle='blue';
ctx.fillText("我和你心连心",30,130);
ctx.font="25px 隶书";
ctx.fillStyle='green';
ctx.fillText("我和你心连心",30,170);
ctx.strokeStyle='green';
ctx.strokeText("我和你心连心",30,200);
var txt1="伟大的中国人民"
ctx.strokeStyle='green';
ctx.strokeText(txt1,30,230);
var mtx1=ctx.measureText(txt1);
ctx.strokeStyle='green';
ctx.strokeText('以上字符串的宽度为:',30,270);
ctx.strokeText(mtx1.width,270,270);
}
window.οnlοad=function(){
draw();
}
</script>
<canvas id="myCanvas" style="border:1px solid;" width="350" height="800"></canvas>