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的更多相关文章

  1. H5新特性——--第三方绘图工具库 echarts(canvas)---SVG绘图

    今天学习的内容 3.1:h5新特性---第三方绘图工具库 echarts(canvas) 百度 echarts;d3;two.js;.... 3.2:h5新特性---SVG绘图 3.2:h5新特性-- ...

  2. H5新特性汇总

    H5新特性: 新增选择器 document.querySelector.document.querySelectorAll 拖拽释放(Drag and drop) API 媒体播放的 video 和 ...

  3. H5新特性-视频,音频-Flash-canvas绘图

    json格式 json - > AJAX json:数据格式,通常是以字符串形式表示 对象 {"name":"james","age" ...

  4. H5新特性--WebStorage--WebSocke

    今天的目标 3.2:h5新特性--WebStorage localStorage  在客户端浏览器保存数据 永久保存 保存数据 localStorage [key] = value 保存数据 loca ...

  5. H5新特性---Web Worker---Web Stroage

    今天的目标 3.1:h5新特性八--Web Worker---代码就3行 程序:program 存储在外存(磁盘)中代码 进程:Process/Task 将程序调用内存中,分配空间 线程:Thread ...

  6. H5新特性---SVG--椭圆--直线--文本--滤镜(高斯滤镜--模糊)--地理定位

    今天的目标 3.1:h5新特性--SVG--椭圆 <ellipse rx="" ry=""  cx="" cy="" ...

  7. H5新特性实现对class的增删改

    直接撸代码 全靠死记硬背 没什么技术点 HTML部分 <!DOCTYPE html> <html lang="en"> <head> <m ...

  8. Atitti html5 h5 新特性attilax总结

    Atitti html5 h5 新特性attilax总结 Attilax觉得不错的新特性 3.语义Header和Footer (The Semantic Header and Footer) 8.占位 ...

  9. 使用h5新特性,轻松监听任何App自带返回键

    1.前言 如今h5新特性.新标签.新规范等有很多,而且正在不断完善中,各大浏览器商对它们的支持,也是相当给力.作为前端程序员,我觉得我们还是有必要积极关注并勇敢地加以实践.接下来我将和各位分享一个特别 ...

随机推荐

  1. 第三个Sprint ------第八天

    四则运算APP开发基本完成! PC端运行结果截图 移动端(华为手机)测试截图 总结:通过这次课程设计,我体会到团队协作的重要性,也体会到了理论联系实际的意义.做一件事,要坚持不懈,不能半途而废!

  2. Hibernate的初次使用

    使用hibernate的四个步骤:第一:创建一个hibernate.cfg.xml.<!DOCTYPE hibernate-configuration PUBLIC "-//Hiber ...

  3. 后端返回值以json的格式返回,前端以json格式接收

    以随便一个类为例子:这个例子是查询企业主营类别前5事项 一.以json数组的格式返回到前端中 (1)后端将结果绑定到param中,然后将结果以为json数组的格式返回到前端 /** * 查询企业主营类 ...

  4. Maven的课堂笔记1

    1 什么是maven? Maven是一个跨平台的项目管理工具,主要用于基于java平台的项目构建,依赖管理. Clean  compile  test  package  install   run ...

  5. 转:为Docker容器设置固定IP实现网络联通(1)——通过Pipework为Docker容器设置

    https://blog.csdn.net/chinagissoft/article/details/51250839 1. 创建并启动一个容器: docker run --cap-add=NET_A ...

  6. Sub-Processes and Call Activities

    https://www.activiti.org/userguide/#bpmnCallActivity http://www.flowable.org/docs/userguide/index.ht ...

  7. 关于更改ListBox的ItemsPanel样式

    首先定义一个ListBoxItem的样式,用来显示相应的图片信息 <Style TargetType="{x:Type ListBoxItem}" > <Sett ...

  8. JavaScript——DOM树的增查改删总结

    对HTML DOM的操作是前端JavaScript编程时必备的技能,本文是我自己对DOM树操作的总结,主要是方法的罗列,原理性的讲述较少,适合大家用于理清思路或是温习 一.什么是HTML DOM? 是 ...

  9. verilog 数据格式

    基数格式(通常为无符号数)[size]'base value size常量的位数 base数制o:8 b:2 d:10 h:16 https://wenku.baidu.com/view/f63daa ...

  10. codeforces631B

    Print Check CodeForces - 631B Kris works in a large company "Blake Technologies". As a bes ...