<canvas id="tutorial" width="150" height="150"></canvas>
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>