- <!doctype html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Rectangle</title>
- <style>
- body{
- background:#dddddd;
- }
- #canvas{
- background:#eeeeee;
- border:1px solid #000000;
- }
- </style>
- </head>
- <body>
- <canvas id="canvas" width="600" height="400">
- Canvas not supported
- </canvas>
- <script src="rectangle.js"></script>
- </body>
- </html>
javascript:
- // JavaScript Document
- var canvas=document.getElementById('canvas'),
- context=canvas.getContext('2d');
- context.lineJoin='round';
- context.lineWidth=30;
- context.font='24px Helvetica';
- context.fillText('Click anywhere to erase',175,40);
- context.strokeRect(75,100,200,200);
- context.fillRect(325,100,200,200);
- context.canvas.onmousedown=function(e){
- context.clearRect(0,0,canvas.width,canvas.height);
- };
js代码的大概结构为:
1. 使用document.getElementById()方法来获取指向canvas的引用。
2. 在canvas对象上调用getContext('2d')方法,获取绘图环境变量。
3. 然后通过绘图环境对象在canvas元素上进行绘制。
代码的前两行基本上是固定的。
lineJoin: 当两条线交汇时创建边角类型。
属性值:beval(斜角),round(圆角),miter(尖角,默认)。
lineWidth: 设置线条宽度,默认为1。
fillText(): 参数(按顺序):要输出的文本,x坐标,y坐标,允许的最大文本宽度。
strokeRect(): 参数:x坐标,y坐标,宽度,高度。作用:为矩形描边,用strokeStyle, lineWidth, lineJoin, MiterLimit属性。
fillRect(): 参数同上。作用:填充矩形,用fillStyle属性。
clearRect(): 参数同上。将矩形与当前剪辑区域相交范围内的所有像素清除。