一、<canvas>元素
1、<canvas>写法：
<canvas id="mycanvas" width="500" height="500">您的浏览器不支持canvas</canvas>
2、<canvas>宽高设置
在使用<canvas>元素时必须设置宽度和高度，指定可以绘画的区域大小，但是宽高设置有一个注意的问题
样例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas{
border:5px solid red;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="500" height="500"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.strokeRect(0, 0, 100, 100);
context.fillRect(101, 0, 100, 100);
context.stroke();
context.fill();
</script>
</html>
在这里我们直接在<canvas>标签内设置了绘画区域的大小，在浏览器中显示的效果是这样的
图片.png
如果我们用常规CSS设置宽高的话
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas{
width:500px;
height:500px;
border:5px solid red;
}
</style>
</head>
<body>
<canvas id="mycanvas"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.strokeRect(0, 0, 100, 100);
context.fillRect(101, 0, 100, 100);
context.stroke();
context.fill();
</script>
</html>
这时浏览器中显示的效果就是这样
图片.png
明明是宽高一样的矩形，为什么会出现拉长的效果呢？
其实<canvas>有自己默认的宽高300px*150px,而且在<canvas>行间样式定义width、height跟在style中定义width、height是有所区别的：<canvas>标签的width和height是<canvas>在浏览器中被渲染的高度和宽度。如果<canvas>的width和height没指定或者值不正确，就被设置成默认值{width:300px;height:150px}；
这就解释了为什么第二种写法导致图形被拉伸，原因是绘画区域的大小没有在<canvas>行间样式中定义，所以被默认为宽高的默认值，而<style>中设置为{width:500px;height:500px;}将绘画区域的高度拉伸了。
3、<canvas>的浏览器支持
<canvas id="mycanvas" width="500" height="500">您的浏览器不支持canvas</canvas>
某些较老的浏览器（尤其是IE9之前的IE浏览器）不支持<canvas>元素，在这些浏览器上，就会显示我们的提示“您的浏览器不支持canvas”，因为我们在<canvas>标签中提供了替换内容。支持<canvas>的浏览器将会忽略标签中的提示内容，并且正常的渲染canvas
二、渲染上下文
<canvas>元素创造了一个固定大小的画布，它公开了一个或多个喧嚷上下文，其可以用来绘制和处理要展示的内容，这里我们将2d渲染上下文。
canvas起初是空白的，默认背景色是透明的。我们在绘制之前，首先脚本需要找到渲染上下文，<canvas>元素有一个叫做getContext()的方法来获得渲染上下文和它的绘画功能，getContext()只有一个参数，上下文的格式，这里对于2d图像而言，可以在<script>中使用
//获取canvas的DOM对象
var canvas =document.getElementById("mycanvas");
//获得渲染上下文
var context = canvas.getContext("2d");
网友评论