function main() {
// Retrieve <canvas> element
var canvas = document.getElementById('example');
if (!canvas) {
console.log('Failed to retrieve the <canvas> element');
return false;
}
// Get the rendering context for 2DCG
var ctx = canvas.getContext('2d');
// Draw a blue rectangle
ctx.fillStyle = 'rgba(0, 0, 255, 1.0)'; // Set color to blue
ctx.fillRect(120, 10, 150, 150); //120和10 // Fill a rectangle with the color
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Draw a blue rectangle(canvas version)</title> </head> <body onload="main()"> <canvas id="example" width="400" height="400"> please use a browser that supports canvas </canvas> <script src="DrawRectangle.js"></script> </body> </html>
使用<canvas>来支持二维图形和三维图形，并不提供方法，使用上下文的机制绘图
ctx=canvas.getContext()的参数指定上下文的类型 ,'2d'或者'3d',将上下文存储到ctx中，
ctx.fillStyle设置要使用的颜色，用这个颜色绘制矩形,
ctx.fillRect(a,b,c,d),前两个参数制定了待绘制矩形顶点在<canvas>中的坐标，后两个制定了矩形的长宽。