HTML5之4__Canvas API: 绘制曲线、变换
2015-05-07 12:18
507 查看
HTML5 开发 起点之一就是 Canvas, 通过它可以动态生成和展示图形、图表、图像以及动画.
在Canvas 出现之前,开发人员若要在浏览器中使用绘图API, 只能使用 Adobe 的Flash和 SVG(可伸缩矢量图形) 插件, 或者只有IE才支持的VML(矢量标记语言), 以及一些JS技巧。
Canvas 和 SVG 对比
Canvas 本质上是一个位图画布, 其上绘制的图形是不可缩放的, 不能像 SVG 图像那样可以缩放, 此外用Canvas 绘制出来的对象不属于页面
DOM 结构或者任何命名空间, 这被认为是一个缺陷, SVG 图像却可以在不同的分辨率下流畅地缩放, 并且支持单击检测. 尽管Canvas 有明显的不足,但 Canvas API 有两个优势:
1. 不需要将所绘制图像中的每个图元当做对象存储, 执行性能非常好。
2. 在其他编程语言现有的优秀二维绘图API 的基础上实现 Canvas API 相对来说比较简单.
一. 先介绍 canvas 绘制曲线
看代码
在Chrome
浏览器运行效果
![](http://img.blog.csdn.net/20150507183335845)
二. 变换
canvas 绘制图像的一种方式是 使用变换 transformation. 实际上 变换是实现复杂canvas 操作的最好方式.
可以这样理解 变换: 把它当成是介于开发人员发出的指令和 canvas 显示结果之间的一个修改正层,
以下一个例子展示了如何使用 最简单变换方法---------translate()
看代码
在Canvas 出现之前,开发人员若要在浏览器中使用绘图API, 只能使用 Adobe 的Flash和 SVG(可伸缩矢量图形) 插件, 或者只有IE才支持的VML(矢量标记语言), 以及一些JS技巧。
Canvas 和 SVG 对比
Canvas 本质上是一个位图画布, 其上绘制的图形是不可缩放的, 不能像 SVG 图像那样可以缩放, 此外用Canvas 绘制出来的对象不属于页面
DOM 结构或者任何命名空间, 这被认为是一个缺陷, SVG 图像却可以在不同的分辨率下流畅地缩放, 并且支持单击检测. 尽管Canvas 有明显的不足,但 Canvas API 有两个优势:
1. 不需要将所绘制图像中的每个图元当做对象存储, 执行性能非常好。
2. 在其他编程语言现有的优秀二维绘图API 的基础上实现 Canvas API 相对来说比较简单.
一. 先介绍 canvas 绘制曲线
看代码
<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>绘制曲线</title> <script language="javascript"> function drawTrails() { var canvas = document.getElementById('trails'); var context = canvas.getContext('2d'); context.save(); context.translate(-10, 350); context.beginPath(); //第一条曲线向右上方弯曲 context.moveTo(0,0); context.quadraticCurveTo(170, -50, 260, -190); // 第二条曲线向右下方弯曲 context.quadraticCurveTo(310, -250, 410, -250); //使用棕色的粗线条来绘制路径 context.strokeStyle = '#663300'; context.lineWidth = 20; context.stroke(); //恢复之前的canvas 状态 context.restore(); } window.addEventListener("load", drawTrails, true); </script> </head> <body> <canvas height="400" width="400" id="trails" style="border: 1px solid;"/> </body> </html>
在Chrome
浏览器运行效果
二. 变换
canvas 绘制图像的一种方式是 使用变换 transformation. 实际上 变换是实现复杂canvas 操作的最好方式.
可以这样理解 变换: 把它当成是介于开发人员发出的指令和 canvas 显示结果之间的一个修改正层,
以下一个例子展示了如何使用 最简单变换方法---------translate()
看代码
<!DOCTYPE html> <html> <meta charset="utf-8" /> <title>变换对角线</title> <canvas id="diagonal" style="border: 1px solid;" width="200" height="200"> </canvas> <script> function drawDiagonal() { var canvas = document.getElementById('diagonal'); var context = canvas.getContext('2d'); // 保存当前绘图状态 context.save(); //向右下方移动绘图上下文 context.translate(70, 140); //以原点为起点,绘制与前面相同的线段 context.beginPath(); context.moveTo(0, 0); context.lineTo(70, -70); context.stroke(); // 恢复原有的绘图状态 context.restore(); } window.addEventListener("load", drawDiagonal, true); </script> </html>运行效果
相关文章推荐
- html5 javascript canvas API 绘制树形图案A
- HTML5 Canvas API 变换(translate函数)
- HTML5开发实例-使用canvas绘制曲线
- [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形)
- HTML5 学习手笔三:canvas API 绘制树形图案B
- 使用HTML5 Canvas API绘制弧线的教程
- HTML5利用Canvas绘制图形(绘制渐变、模式、变换)
- 调用HTML5的Canvas API绘制图形的快速入门指南
- HTML5 canvas基本绘图之绘制曲线
- html5 学习笔记 API canvas1 绘制对角线
- HTML5 学习手笔二:canvas API 绘制树形图案A
- HTML5 学习手笔二:canvas API 绘制树形图案A
- html5 canvas常用api总结(三)--图像变换API
- html5 canvas之绘制曲线
- HTML5教程-用Canvas标签绘制坐标变换图形
- 使用HTML5的Canvas绘制曲线的简单方法
- html5 canvas 绘制曲线图
- 小贝_html5 canvas绘制线条曲线
- HTML5 Canvas ( 圆和切点曲线的绘制 ) arc, arcTo
- 通过HTML5 Canvas API绘制弧线和圆形的教程