1.canvas只有两个属性width和height，若没有设置这两个属性，则初始宽高为300px，150px，是利用DOM.properties设置的
如果绘制的是扭曲的图形，要用width和height属性设置宽高，而不是css
2.用getContext()找到绘制上下文和绘制功能
3.绘制方法
1）绘制填充矩形 》》》 fillRect(x, y, width, height)
2）绘制矩形边框 》》》 strokeRect(x,y,width,height)
3）清除指定矩形区域 》》》 clearRect(x,y,width,height)
x、y是画布中的坐标，width、height是绘制矩形的宽高
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>day1-1</title> <style type="text/css"> canvas{border:1px solid black;} </style> </head> <body onload="draw()"> <canvas id="tutorial" width="150" height="150"> </canvas> <canvas id="clock" width="150" height="150"> </canvas> <script type="text/javascript"> function draw(){ var canvas = document.getElementById('tutorial') if(canvas.getContext){//判断浏览器是否支持getContext属性 var ctx = canvas.getContext('2d') ctx.fillStyle = "rgb(200, 0, 0)" ctx.fillRect(10, 10, 55, 50) ctx.fillStyle = "rgb(0,0,200,0.5)" ctx.fillRect(30,30,55,50) }else{} var canvas2 =document.getElementById('clock') if(canvas2.getContext){ var ctx = canvas2.getContext('2d') ctx.fillRect(25, 25, 100, 100) ctx.clearRect(45,45,60,60) ctx.strokeRect(50,50,50,50) } } </script> </body> </html>
