canvas学习笔记

html5的新标签：canvas;

作用：标签定义图形，比如图表和其他图像；标签只是图形容器，您必须使用脚本来绘制图形。默认大小：宽300px，高150px;

背景知识：概念最初由苹果公司提出的，用于在Mac os X webkit中创建控制板部件。在canvas出现之前，开发人员若要在浏览器中使用绘图API，只能使用Adobe的Flash和SVG插件或者只有IE才支持的VML（矢量标记语言）

强调一点：canvas元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务.

关于这个容器，下面给一个直观的图来表示：

canvas学习笔记

开始绘图之旅：

beginPath方法表示开始绘制路径，moveTo(x, y)方法设置线段的起点，lineTo(x, y)方法设置线段的终点，stroke方法用来给透明的线段着色。

ctx.beginPath(); // 开始路径绘制
ctx.moveTo(20, 20); // 设置路径起点，坐标为(20,20)
ctx.lineTo(100, 100); // 绘制一条到(100,100)的直线
ctx.lineWidth = 1.0; // 设置线宽
ctx.strokeStyle = "#CC0000"; // 设置线的颜色
ctx.stroke(); // 进行线的着色，这时整条线才变得可见

canvas学习笔记

首先，我们需要定义一个用作绘图的上下文环境，我们使用 getContext("2d") 对象，这是一个内置的HTML5对象，可用于在画布上绘制文本、线条、矩形、圆形等等。后面会多次用到它，所以先赋给一个变量存起来。var ctx = getContext("2d");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        canvas {
            border:1px solid red;
        }
    </style>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext("2d");
 
</script>
</body>
</html>

View Code