Html5(6)画图
2015-08-11 22:23
567 查看
Canvas标签的使用
①
步骤:一般用脚本创建canvas标签;通过canvas对象的getContext(“2d”)获取画图工具,该context拥有各种绘制图形、变换图形的方法
②绘制路径
步骤:利用标签定义画布,用js获取这个标签元素,并通过getContext(“2d”)来获取画图工具,
然后开启路径beginPath;通过该工具画图;完成后关闭路径closePath
③绘图工具的moveTo 和 lineTo 方法,略
④绘制贝塞尔曲线;语法:bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
⑤绘制渐变颜色:使用到 LinearGradient 对象
SVG简介
SVG:Scalable Vector Graphics (可伸缩矢量图形),使用XML格式定义图形
使用:
PS:
www.createjs.com有一些别人写好的 处理 图像、动画、视频等等的库
EASELJS CDN是用于绘图的文件
①
<canvas>标签本身只是容器,画图需要用脚本
步骤:一般用脚本创建canvas标签;通过canvas对象的getContext(“2d”)获取画图工具,该context拥有各种绘制图形、变换图形的方法
②绘制路径
步骤:利用标签定义画布,用js获取这个标签元素,并通过getContext(“2d”)来获取画图工具,
然后开启路径beginPath;通过该工具画图;完成后关闭路径closePath
③绘图工具的moveTo 和 lineTo 方法,略
④绘制贝塞尔曲线;语法:bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
⑤绘制渐变颜色:使用到 LinearGradient 对象
SVG简介
SVG:Scalable Vector Graphics (可伸缩矢量图形),使用XML格式定义图形
使用:
①规定<svg viewbox="0 0 120 120" version="1.1"> </svg>标签 ②在svg标签内 写 <circle cx="10" cy="10" r="20"></circle> //画一个矢量圆 ③常见的一些图形可以在 www.developer.mozilla.org中的API文档中查找SVG相关的内容 ④可以从外部引入svg文件,建立svg为后缀格式的文件,可以在html文件中iframe中引入。注意:该svg文件要用xml的头部来定义
PS:
www.createjs.com有一些别人写好的 处理 图像、动画、视频等等的库
EASELJS CDN是用于绘图的文件
相关文章推荐
- Html5(5)视频、音频 及 拖放
- 6最好的之一 HTML5/CSS3 演示(PPT)框架
- 【坑】html5中使用context.lineWidth设置线的宽度是1,然而输出的宽度是2的原因
- HTML5本地存储Localstorage
- HTML5——Data Url生成
- HTML5的Canvas实现小圆点在屏幕内跑动
- HTML5 Boilerplate - 让页面有个好的开始
- 移除HTML5 input在type="number"时的上下小箭头
- 利用html5的FormData对象和ajax实现异步文件上传
- HTML5 3D翻书效果(双面效应)
- 1001---HTML5介绍
- html5的spellcheck属性(拼写、文法检查)
- html5 新选择器 querySelector querySelectorAll
- 利用html5实现上传图片预览
- HTML5
- 【坑】html5中使用canvas绘制两个strokeRect之间忘了用beginPath()
- HTML5之音频audio知识(部分vedio)
- Html5(4)Selection 和 Range对象
- html5基础学习
- Html5(3)表单相关新特性