H5新特性之canvas
canvas无疑是H5之中最受欢迎的新特性了,它可以让浏览毫无费力的画出各种图案,动画。
canvas的性能不会因为画布上的图案多少而改变,因此做动画用canvas性能也相当优秀。
canvas最基本的概念是1.路径 2.描边 3.填充 4.变换 5.图片操作
首先先获得canvas的操作借口集(这里先用2d为例):
let canvas = document.getElementById('canvas');
// canvas的所有画图接口都集成在gd这里了
let gd = canvas.getContext('2d');
1.路径
常见的路径操作有
//清除之前的路径
gd.beginPath(); //移动点到x,y
gd.moveTo(x,y); //线连到x,y
gd.lineTo(x,y); //矩形“选区”(x,y为左上角的点,w,h分别为宽高)
gd.rect(x,y,w,h); //圆弧“选区”
gd.arc(x,y,r,startArg,endArg,是否逆时针); //闭合路径
gd.closePath();
2.描边
常见的描边操作:
// 先设置好描边的样式
gd.strokeStyle = '任意CSS颜色';
gd.lineWidth = 3; // 边宽3px
// 把上面的路径描一次边
gd.stroke(); //直接描矩形
gd.strokeRect(x,y,w,h); //写字
gd.font = '30px 宋体';
gd.strokeText('内容~~',x,y);
3.填充
常见的填充操作:
//设置填充样式
gd.fillStyle = '任意css样式';
//把上面的路径自动闭合填充
gd.fill(); //直接填充矩形
gd.fillRect(x,y,w,h); //填充字体
gd.font = '30px 宋体';
gd.fillText('内容',x,y);
4.变换
和CSS3的变换一样。canvas的变换也有scale、translate、rotate
gd.translate(x,y) //图形相对原来的位置移动多少 gd.rotate(Math.PI/) //整个画布相对与左上角,逆时针转90° gd.scale(x轴放大倍数,y轴放大倍数); //整个画布左上角为原点,分别放大不同倍数
而变换前后要有save和restore来还原画布的变换状态
gd.save(); //先保存变换前画布状态
//。。。。变换1
//。。。。变换2
//。。。。变换n
gd.restore(); //还原变换后的画布状态
5.图片操作
//填充图片
let img = new Image();
img.src = 'url';
img.onload = function(){
gd.drawImage(
img, //或者是get一个img dom又或者createElement('img')
sx,sy,sw,sh, //原图的定位,大小
dx,dy,dw,dh //在canvas的定位,大小
)
} //操作图片像素 let data = gd.getImageData(x1,y1,x2,y2); //获取从点1到点2之间的所有像素点的值,每个点都有r、g、b、a四个值,例如点1的值为data[0~3] //对data数组一波操作之后,把数据放回画布中
gd.putImageData(data,x1,x2); //把数据从点1这里开始放数据
ps:当然还有一个比较重要的操作
gd.clearRect(0,0,canvas.width,canvas.height); //清除画布 canvas.toDataURL(); //把canvas转化成base64
H5新特性之canvas的更多相关文章
- H5新特性——--第三方绘图工具库 echarts(canvas)---SVG绘图
今天学习的内容 3.1:h5新特性---第三方绘图工具库 echarts(canvas) 百度 echarts;d3;two.js;.... 3.2:h5新特性---SVG绘图 3.2:h5新特性-- ...
- H5新特性汇总
H5新特性: 新增选择器 document.querySelector.document.querySelectorAll 拖拽释放(Drag and drop) API 媒体播放的 video 和 ...
- H5新特性-视频,音频-Flash-canvas绘图
json格式 json - > AJAX json:数据格式,通常是以字符串形式表示 对象 {"name":"james","age" ...
- H5新特性--WebStorage--WebSocke
今天的目标 3.2:h5新特性--WebStorage localStorage 在客户端浏览器保存数据 永久保存 保存数据 localStorage [key] = value 保存数据 loca ...
- H5新特性---Web Worker---Web Stroage
今天的目标 3.1:h5新特性八--Web Worker---代码就3行 程序:program 存储在外存(磁盘)中代码 进程:Process/Task 将程序调用内存中,分配空间 线程:Thread ...
- H5新特性---SVG--椭圆--直线--文本--滤镜(高斯滤镜--模糊)--地理定位
今天的目标 3.1:h5新特性--SVG--椭圆 <ellipse rx="" ry="" cx="" cy="" ...
- H5新特性实现对class的增删改
直接撸代码 全靠死记硬背 没什么技术点 HTML部分 <!DOCTYPE html> <html lang="en"> <head> <m ...
- Atitti html5 h5 新特性attilax总结
Atitti html5 h5 新特性attilax总结 Attilax觉得不错的新特性 3.语义Header和Footer (The Semantic Header and Footer) 8.占位 ...
- 使用h5新特性,轻松监听任何App自带返回键
1.前言 如今h5新特性.新标签.新规范等有很多,而且正在不断完善中,各大浏览器商对它们的支持,也是相当给力.作为前端程序员,我觉得我们还是有必要积极关注并勇敢地加以实践.接下来我将和各位分享一个特别 ...
随机推荐
- 第八周--Linux中进程调度与进程切换的过程
[潘恒 原创作品转载请注明出处 <Linux内核分析>MOOC课程 "http://mooc.study.163.com/course/USTC 1000029000 " ...
- HanderBar
对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是:根据页面需要的信息,构 ...
- 简话h5唤起本地app
在没接触这个功能之前,查询各种文档后也只是似懂非懂,做过之后,发现其实很简单,简言之就是通过一个iframe或者a标签来跳转app端提供的URL schema(至于这个URL schema的组成格式, ...
- Use curl with uuid(uuidgen) under shell
#!set uuidtmp = uuid.tmp #!uuidgen > $uuidtmp #!set uuid=<$uuidtmp #!rm $uuidtmp #!echo $uuid ...
- Windows 下面 winrar 压缩简单记录
1. 最高压缩比率 原始文件大小: 2.06g(3000余个文件) 压缩后文件大小:475m 压缩耗时: 210s 压缩率:22% 2. 较高压缩比率 压缩后文件大小:700 m 压缩率:32% 3 ...
- 第八周PSP 新折线图和饼图 个人时间管理
1.PSP DATE START-TIME END-TIME EVENT DELTA TYPE 4.18 15.36 16.10 读构建执法 走神5min 29mi ...
- loadrunner 基础-学习笔记一
由于公司要使用loadrunner暂停学习jmeter 1 loadrunner组件: virtual user generator:录制最终用户业务流程并创建自动化性能测试脚本,vuser脚本 co ...
- Codeforces Round #412 C. Success Rate
C. Success Rate time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...
- 如何注册CUBA Studio
拿着注册码不会注册,我也是醉了 运行Cuba Studio,然后在浏览器中打开,不要新建项目,这时右上角有一个英文[Register]和一个单选开关.如下: 这个英文不是这个单选开关的说明,它是一个超 ...
- 19+ JavaScript 常用的简写技巧
博主说:对于任何基于 JavaScript 的开发人员来说,这绝对是一篇必读的文章,乃提升开发效率之神器也. 正文 js 1. 三元运算符 当你想用一行代码来写if...else语句的时候,使用三元操 ...