OK，今天，我们来一起讲一讲画布canvas的一些简单应用，在网页上"画"出自己的姓名出来。
那么首先，我们要理解一下canvas有哪些常用的API，一起来看看：
canvas.getContext('2d'); 获取上下文
beginPath()：开始绘制
closePath()：绘制结束
strokeStyle()：画笔样式
stroke()：绘制
lineWidth()：线宽
lineCap()：线尾样式
globalAlpha()：透明度
moveTo()：起始位置
lineTo()：结束位置
save()restore()：表示这一段样式只在这里生效
那么首先，我们先把网页搭建出来
<style type="text/css">
*{
padding:0;
margin:0auto;
}
div{
position:relative;
margin-top:20px;
width:400px;
height:400px;
}
#Myname{
position:absolute;
background-color:pink;
width:400px;
height:400px;
}
</style>
<body>
<div>
<canvasid="Myname"></canvas>
</div>
</body>
接着，我们来用一下这些API，尝试着来"画"一个姓出来
<script type="text/javascript">
document.body.οnlοad=begin;
functionbegin(){
varcan=document.getElementById("Myname");
varctx=can.getContext('2d');
ctx.save();
ctx.globalAlpha=0.6; //透明度
ctx.lineWidth=1; //线宽度
ctx.lineCap="round";
ctx.strokeStyle="#000"; //颜色 紫色
ctx.shadowBlur=10;
ctx.shadowColor="blue"; //阴影颜色
ctx.beginPath();
ctx.moveTo(140,40); //起始点
ctx.lineTo(100,80); //结束点
ctx.moveTo(120,60); //起始点
ctx.lineTo(120,100); //结束点
ctx.moveTo(140,65); //起始点
ctx.lineTo(210,65); //结束点
ctx.moveTo(175,40); //起始点
ctx.lineTo(175,100); //结束点
ctx.moveTo(165,95); //起始点
ctx.lineTo(175,100); //结束点
ctx.moveTo(150,75); //起始点
ctx.lineTo(155,80); //结束点
ctx.stroke();
ctx.restore(); //这一段样式只在这两个函数之间有效
}
</script>
注意，这个js要放在canvas的定义后面
OK，我们看到，一个"付"字被画出来了，那么根据这几个API，我们就可以把整个名字画出来了，但是这样会很麻烦，所以，应该要有一个更加简单的方法才对，那么这个，我们下次再讲。
注：参考知识点：慕课网canvas应用
1002
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
