今天早上看了一下 canvas 前端画图，数据可视化， 百度的 echart.js  , d3等 js 库都已经提供了强大的绘制各种图形的 API。

下面记录一下 有关canvas 绘图的基本知识：

 



<html>
<head >
    <script src ='./aop.js'></script>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    /*var path1 = new Path2D();
    path1.rect(10, 10, 100,100);
    ctx.stroke(path1);*/

    ctx.rect(10, 10, 200,100);
    ctx.stroke();
</script>
</body>
</html>


 

　　html5 canvas 实现简单的画图_html5

 

Canvas是HTML5新增的组件，它就像一块幕布，可以用JavaScript在上面绘制各种图表、动画等。

没有Canvas的年代，绘图只能借助Flash插件实现，页面不得不用JavaScript和Flash进行交互。有了Canvas，我们就再也不需要Flash了，直接使用JavaScript完成绘制。

一个Canvas定义了一个指定尺寸的矩形框，在这个范围内我们可以随意绘制：



<canvas id="test-canvas" width="300" height="200"></canvas>


　　由于浏览器对HTML5标准支持不一致，所以，通常在​​<canvas>​​内部添加一些说明性HTML代码，如果浏览器支持Canvas，它将忽略​​<canvas>​​内部的HTML，如果浏览器不支持Canvas，它将显示​​<canvas>​​内部的HTML：



<canvas id="test-stock" width="300" height="200">
      <p>你的浏览器不支持Canvas</p>
</canvas>


　　在使用Canvas前，用​​canvas.getContext​​来测试浏览器是否支持Canvas：



<!-- HTML代码 -->
<canvas id="test-canvas" width="200" heigth="100">
    <p>你的浏览器不支持Canvas</p>
</canvas>
<script>
"use strict";
var canvas = document.getElementById('test-canvas');
if (canvas.getContext) {
    alert('你的浏览器支持Canvas!');
} else {
    alert('你的浏览器不支持Canvas!');
}
</script>


　　

HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。

不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。

getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

本手册提供完整的 getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。

 

颜色、样式和阴影

属性

描述

​​fillStyle​​

设置或返回用于填充绘画的颜色、渐变或模式

​​strokeStyle​​

设置或返回用于笔触的颜色、渐变或模式

​​shadowColor​​

设置或返回用于阴影的颜色

​​shadowBlur​​

设置或返回用于阴影的模糊级别

​​shadowOffsetX​​

设置或返回阴影距形状的水平距离

​​shadowOffsetY​​

设置或返回阴影距形状的垂直距离

方法

描述

​​createLinearGradient()​​

创建线性渐变（用在画布内容上）

​​createPattern()​​

在指定的方向上重复指定的元素

​​createRadialGradient()​​

创建放射状/环形的渐变（用在画布内容上）

​​addColorStop()​​

规定渐变对象中的颜色和停止位置



线条样式

属性

描述

​​lineCap​​

设置或返回线条的结束端点样式

​​lineJoin​​

设置或返回两条线相交时，所创建的拐角类型

​​lineWidth​​

设置或返回当前的线条宽度

​​miterLimit​​

设置或返回最大斜接长度



矩形

方法

描述

​​rect()​​

创建矩形

​​fillRect()​​

绘制“被填充”的矩形

​​strokeRect()​​

绘制矩形（无填充）

​​clearRect()​​

在给定的矩形内清除指定的像素



路径

方法

描述

​​fill()​​

填充当前绘图（路径）

​​stroke()​​

绘制已定义的路径

​​beginPath()​​

起始一条路径，或重置当前路径

​​moveTo()​​

把路径移动到画布中的指定点，不创建线条

​​closePath()​​

创建从当前点回到起始点的路径

​​lineTo()​​

添加一个新点，然后在画布中创建从该点到最后指定点的线条

​​clip()​​

从原始画布剪切任意形状和尺寸的区域

​​quadraticCurveTo()​​

创建二次贝塞尔曲线

​​bezierCurveTo()​​

创建三次方贝塞尔曲线

​​arc()​​

创建弧/曲线（用于创建圆形或部分圆）

​​arcTo()​​

创建两切线之间的弧/曲线

​​isPointInPath()​​

如果指定的点位于当前路径中，则返回 true，否则返回 false



转换

方法

描述

​​scale()​​

缩放当前绘图至更大或更小

​​rotate()​​

旋转当前绘图

​​translate()​​

重新映射画布上的 (0,0) 位置

​​transform()​​

替换绘图的当前转换矩阵

​​setTransform()​​

将当前转换重置为单位矩阵。然后运行 transform()



文本

属性

描述

​​font​​

设置或返回文本内容的当前字体属性

​​textAlign​​

设置或返回文本内容的当前对齐方式

​​textBaseline​​

设置或返回在绘制文本时使用的当前文本基线

方法

描述

​​fillText()​​

在画布上绘制“被填充的”文本

​​strokeText()​​

在画布上绘制文本（无填充）

​​measureText()​​

返回包含指定文本宽度的对象



图像绘制

方法

描述

​​drawImage()​​

向画布上绘制图像、画布或视频



像素操作

属性

描述

​​width​​

返回 ImageData 对象的宽度

​​height​​

返回 ImageData 对象的高度

​​data​​

返回一个对象，其包含指定的 ImageData 对象的图像数据

方法

描述

​​createImageData()​​

创建新的、空白的 ImageData 对象

​​getImageData()​​

返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据

​​putImageData()​​

把图像数据（从指定的 ImageData 对象）放回画布上



合成

属性

描述

​​globalAlpha​​

设置或返回绘图的当前 alpha 或透明值

​​globalCompositeOperation​​

设置或返回新图像如何绘制到已有的图像上



其他

方法

描述

save()

保存当前环境的状态

restore()

返回之前保存过的路径状态和属性

createEvent()

 

getContext()

 

toDataURL()