画布 Demo | canvas.getContext(), CanvasRenderingContext2D, canvas.width, canvas.height, canvas.toDataURL() canvas/demo.html
<html> <head> <title>画布 Demo</title> </head> <body> <canvas id="canvas" width="320" height="240" style="background-color: rgb(222, 222, 222)"> 您的浏览器不支持 canvas 标签 </canvas> <br/> <button type="button" onclick="demo();">Demo</button> <br /> <img id="img" alt="" src="" /> <script type="text/javascript"> var canvas = document.getElementById('canvas') if (canvas.getContext) { alert("您的浏览器支持 canvas 标签"); } else { alert("您的浏览器不支持 canvas 标签"); } /* * canvas 标签 - 画布标签 * getContext("2d") - 获取画布标签上的 2D 上下文对象（CanvasRenderingContext2D 对象） * width - 画布的宽 * height - 画布的高 * canvas.toDataURL(type) - 返回画布数据，默认类型为 image/png *type - 指定返回画布数据的类型，比如可以指定为 image/jpeg，默认类型为 image/png * * CanvasRenderingContext2D - 画布的 2D 上下文对象，其拥有多种绘制图像的方法 * canvas - 上下文所对应的画布 */ var ctx = canvas.getContext('2d'); alert(ctx.canvas.id); function demo() { ctx.fillRect(20, 20, 100, 100); alert("width: " canvas.width.toString()); alert("height: " canvas.height.toString()); alert(canvas.toDataURL("image/jpeg")); alert(canvas.toDataURL()); // image/png document.getElementById("img").src = canvas.toDataURL(); } </script> </body> </html><!DOCTYPE HTML>
