- <!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(): 参数同上。将矩形与当前剪辑区域相交范围内的所有像素清除。