<bodyonload="main()"> <canvasid="mycanvas"width="400"height="400"> Please use the browser supporting "canvas" </canvas> <scriptsrc="HelloCanvas2d.js"></script> </body> </html>
HelloCanvas2d.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
//HelloCanvas2d.js functionmain() { //获取<canvas>标签 var canvas = document.getElementById("mycanvas"); //如果没找到<canvas>标签,则输出错误信息 if (!canvas) { console.log('Failed to retrieve the <canvas> element.'); return; }
// canvas绘图机制:上下文。要在<canvas>上绘制图像,须先获取绘图上下文,“2d”代表我们要绘制二维图形。 // 注意区分‘2d’大小写 var ctx = canvas.getContext("2d");