<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
canvas{border:1px solid;width: 200px;height: 100px;}
</style>
</head>
<body>
<canvas id="myCanvas">
浏览器不支持canvas元素时显示该文本内容
</canvas>
<script type="text/javascript">
//获取canvas#myCanvas元素
var c=document.getElementById("myCanvas");
//通过canvas元素的getContext方法来获取其上下文，
//即创建Context对象，获取允许进行绘制的2D环境
//(允许使用3d字符串参数）
var context=c.getContext("2d");
//moveTo方法用于建立新的子路径，并规定其起点（x，y）
context.moveTo(0,0);
//lineTo方法用于规定直线终点（x，y）
context.lineTo(200,100);
//stroke方法用于沿路径绘制一条直线
context.stroke();
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
canvas{border:1px solid;width: 200px;height: 100px;}
</style>
</head>
<body>
<canvas id="myCanvas">
浏览器不支持canvas元素时显示该文本内容
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
//fillStyle属性用于指定绘制图形的填充颜色
context.fillStyle="#ff00ff";
//fillRect属性用于要绘制的图形的位置与尺寸，
//坐标（0,0）表示从（0,0）为起点，
//而（200,100）表示图形宽200像素，高100像素
context.fillRect(0,0,200,100);
</script>
</body>
</html>绘制直线若如上面两个例子这样，你会发现运行代码时显示的并不像自己想象的那样，那是因为我们将canvas的宽高样式写在了内部样式，为了解决这个问题，我们要将canvas的宽高样式写在内联样式中，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
canvas{border:1px solid;}
</style>
</head>
<body>
<!--将宽高样式写在内联样式中的style属性也不能达到我们要的效果-->
<canvas id="myCanvas" width="200px" height="100px">
浏览器不支持canvas元素时显示该文本内容
</canvas>
<script type="text/javascript">
//获取canvas#myCanvas元素
var c=document.getElementById("myCanvas");
//通过canvas元素的getContext方法来获取其上下文，
//即创建Context对象，获取允许进行绘制的2D环境
//(允许使用3d字符串参数）
var context=c.getContext("2d");
//moveTo方法用于建立新的子路径，并规定其起点（x，y）
context.moveTo(0,0);
//lineTo方法用于规定直线终点（x，y）
context.lineTo(200,100);
//stroke方法用于沿路径绘制一条直线
context.stroke();
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
canvas{border:1px solid;}
</style>
</head>
<body>
<!--将宽高样式写在内联样式中的style属性也不能达到我们要的效果-->
<canvas id="myCanvas" width="200px" height="100px">
浏览器不支持canvas元素时显示该文本内容
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
//fillStyle属性用于指定绘制图形的填充颜色
context.fillStyle="#ff00ff";
//fillRect属性用于要绘制的图形的位置与尺寸，
//坐标（0,0）表示从（0,0）为起点，
//而（200,100）表示图形宽200像素，高100像素
context.fillRect(0,0,200,100);
</script>
</body>
</html>若我们只想绘制一个矩形的轮廓而不想填充则可以使用stroke()方法，请看下面例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
canvas{border:1px solid;}
</style>
</head>
<body>
<!--将宽高样式写在内联样式中的style属性也不能达到我们要的效果-->
<canvas id="myCanvas" width="200px" height="100px">
浏览器不支持canvas元素时显示该文本内容
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
//fillStyle属性用于指定绘制图形的填充颜色
context.strokeStyle="#ff00ff";
//fillRect属性用于要绘制的图形的位置与尺寸，
//坐标（0,0）表示从（0,0）为起点，
//而（200,100）表示图形宽200像素，高100像素
context.strokeRect(0,0,200,100);
</script>
</body>
</html>
随时随地看视频
