一、获取绘制元素
var c=document.getElementById("myCanvas");
二、设置cavans上下文
//获取cavas绘制上下文 var ctx=c.getContext("2d");
三、绘制图形
//设置填充样式 ctx.fillStyle="#FF0000" //设置填充矩形起点、长宽 ctx.fillRect(20,20,150,75)
四、完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>canvas</title> </head> <body> <canvas id="myCanvas" width="200" height="200" style="border:1px solid #753838;">您的浏览器不支持HTML5 canvas</canvas> </body> <script> <!-- 获取绘制元素--> var c=document.getElementById("myCanvas"); //获取cavas绘制上下文 var ctx=c.getContext("2d"); //设置填充样式 ctx.fillStyle="#FF0000" //设置填充矩形起点、长宽 ctx.fillRect(20,20,150,75) </script> </html>
