一、<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");

canvas 的基本用法