H5系列之canvas

what is canvas？(什么是canvas)

其实他只是H5里面的一个标签而已，那么他作为一个标签，肯定有他的用途，他就像是一幅画布，等待着你来作画。可以说，他只是一个容器而已，需要配合着JavaScript来进行绘制。

那么他能做些什么东西呢？

例如这个：http://www.yyyweb.com/demo/tearable-cloth/index.html

还有这个：http://canvasrider.com/tracks/409068

用处很多，但是用的最多的还是，简单的画个图形啊，图形移动什么的。

　　画三角形

画矩形

　　画圆

　　画圆角矩形

　　填充颜色

　　图形缩放，平移与旋转

　　填充图片

那么开始介绍它的怎么使用的：

创建标签，那么画布的大小设置，在标签上面设置，如果在css设置，设置的是这个标签的大小，而不是画布的大小，这点要注意。

<canvas width="500px" height="500px"></canvas>

<canvas width="500px" height="500px" style="border: 1px solid"></canvas>

加上边框，以便于我们知道他在哪里，下面的框框，就是画布的区域了

开始准备工作 ↓

<body>

　　<canvas id="can" width="500px" height="500px" style="border: 1px solid"></canvas>

<script>

　　var can = document.getElementById('can'); //选择canvas标签

　　var ctx = can.getContext('2d'); //选择画布的绘制的类型，只能填2d

</script>

</body>

开始画出我们的第一条线。

 <script>

    var can = document.getElementById('can');

    var ctx = can.getContext('2d');           

    ctx.moveTo(100,100);    // 选择在画布中的起始位置， 左上角是0，0

    ctx.lineTo(200,200);    // 选择从起始位置开始，画到 200 200 的位置

    ctx.stroke();           // 开始画。

</script>

<script>

    var can = document.getElementById('can');

    var ctx = can.getContext('2d');           

    ctx.moveTo(100,100);

    ctx.lineTo(200,200);

    ctx.lineTo(0, 200); //再添加一条线

    ctx.stroke();           
</script>

效果图如下：

接下来，闭合他形成一个三角形

<script>

    var can = document.getElementById('can');

    var ctx = can.getContext('2d');           

    ctx.moveTo(100,100);

    ctx.lineTo(200,200);

    ctx.lineTo(0, 200);

    ctx.closePath();//闭合图形，有两条线以上的，能自动帮你连接到 起始点。

    // ctx.lineTo(100,100)；当然自己计算位置，也是可以的

    ctx.stroke();

 </script>

效果图如下：一个三角形的形状就出来了。

上面是画直线，下面画曲线。画曲线呢，需要用到二次贝赛尔曲线，和三次贝赛尔曲线。

二次贝塞尔曲线呢，有三个点。起始点，控制点，和终点。首先，现象一个常见。有一条绳子，头尾固定，在中间再绑一条绳子，往上拉。就像下面这样

所以中间那个点，如果越高，那么就会越弯曲。

那么还有个三次贝塞尔曲线，听名字就知道，比二次贝赛尔曲线多了一个点。bezierCurveTo()

接下来画个矩形吧。

画矩形呢，不需要一步一步的画，有方法，直接可以画 cxt.rect(x,y,width,height)

<script>

    var can = document.getElementById('can');

    var ctx = can.getContext('2d');           

    ctx.rect(50, 50, 200, 100); //第一二个参数是  起始点的X，Y，第三四个参数是 矩形的宽高

    ctx.stroke();       //开始画

</script>

效果如下：

不过，不止有一个方法而已，还有另外两个方法：

<script>

        var can = document.getElementById('can');

        var ctx = can.getContext('2d');           

        ctx.strokeRect(50, 50, 200, 100); //第一二个参数是  起始点的X，Y，第三四个参数是 矩形的宽高
　　　　　//不用写 ctx.stroke（）；


    </script>

这个方法的，虽然也是画矩形，只不过他会填充颜色。

<script>

    var can = document.getElementById('can');

    var ctx = can.getContext('2d');           

    ctx.fillRect(50, 50, 200, 100); //第一二个参数是  起始点的X，Y，第三四个参数是 矩形的宽高

</script>

接下来，画圆。arc(100，100，50，0，Math.PI *2, 0), 第一二个参数，还是起始点的位置X，和Y。只不过起始点是在圆心。第三个参数是，圆的半径，第四五个参数，是起始弧度的位置，和结束的位置，最后一个参数，是以顺时针，还是逆时针画 0为顺时针，1为逆时针。

那我们设置，第四个参数，为0，第五个参数为360度，也就是 Math.PI * 2。是不是就是一个圆啦。

<script>

    var can = document.getElementById('can');

    var ctx = can.getContext('2d');           

    ctx.arc(100, 100, 50, 0, Math.PI *2, 0);

    ctx.stroke();

</script>

还有一个注意点，顺时针的，90度，和逆时针的90度，是不一样的呢。

ctx.arc(100, 100, 50, 0, Math.PI *0.5, 0);

ctx.arc(300, 100, 50, 0, Math.PI *0.5, 1);

再画个圆角矩形。需要用到arcTo()方法，首先，我们需要知道几个点的位置 ↓

arcTo(150, 20, 150, 30, 50)呢，有5个参数, 第一二个参数，是决定了 B点的位置，第三个四个参数呢，是决定了怎么弯，往上弯，还是往下弯。第五个参数呢，是圆角的像素，像border-radius 属性一样。

第一步，决定A点，使用moveTo(20, 20)。

ctx.moveTo(20, 20);

第二步，决定B点的位置。

ctx.arcTo(150, 20, , , ,);

第三步，往上弯，还是往下弯(这个属性怎么决定呢？第三个参数，可以理解为X，B点的X为150，你如果要往上下弯的话，那么第三个参数，就要跟B点的X 一样。也就是150，

关键在第四个值，第四个参数，是Y，如果要往下弯的话，那么Y的值，就要大于 B点的Y值，如果要往上弯的话，就要小于B点的Y值。大多少小多少无所谓，只要大过就行)

ctx.arcTo(150, 20, 150, 30, );

第四步，决定角度的程度

ctx.arcTo(150, 20, 150, 30, 50);

第五步，画出来

ctx.stroke();

效果图：

如果要往上弯呢，第四个参数要小于 B点的Y 对吧。那么我们把代码改成 ctx.arcTo(150, 20, 150, 10, 50); 第四个参数 10，比B点的Y 20 小。所以会变成往上弯。

记住一点就行。(如果要往上下弯，改变Y，往左右弯，改变X)

那么接下来，画个完整的圆角矩形。

这是我们上面教的。到这里应该怎么办了呢。计算出 A点的 X 和 Y等于200，80

最后一个点。

最后，会发现，出了一条线。我们只需要把起始点的X +20 即可。为啥+20？因为弯曲的值为 20。

给画好的图形填充颜色。

其实他还不止可以填充单色。还可以填充线性渐变，径向渐变。

线性渐变：

createLinearGradient() 怎么理解呢。你可以把它理解为，这个要填充的矩形。

因为，渐变开始的点，是X0，Y0，并不是图形的左上角那个点，而是画布的左上角 (原点) 所以，你把图形的位置移动一下。你就会发现问题了。

有没有想过一个问题，如果内圈的圆，超过外面的圆会成什么样子？

如果两个圈，相等且相离呢？

话说，为什么会出现这种情况呢？其实最主要的一点还是，他的原理，下面是一张原理示意图：

现在，我们会画单个图形了，如果要画多个图形，或者，多条线，不相连呢？因为我们知道，我们的每一笔操作，都是连在一起的。

有个方法。ctx.beginPath()。可以把它理解为，我把笔拿起来。具体下个位置在哪里。需要再次重新定起始点。

如果不把笔拿起来会怎么样呢？ ↓ 像写连笔字一样，不会中断的。

如果要画两个图形，或者不连在一起的话，需要使用beginPath() 方法。可以重新设置起始点。

缩放，平移，旋转

缩放ctx,scale(1, 1); 1是默认值，正常大小。小于1 也就是 0~0.99 都是缩小，大于1呢 2是2倍， 3是3倍。如此类推

平移。ctx.translate(100, 100);

旋转。ctx.rotate(Math.PI) 一个PI 等于180度，以画布原点旋转，而不是以自身的左上角旋转。

如果要把旋转点，在图形上面，是用translate 进行平移原点即可。

那么缩放，平移，旋转，都是按照原点进行的，后续的操作，都会受到原点的移动，而发生错位，什么的。所以canvas 还有一个方法，就是用来存储数据的。

那么，如何不受到影响呢？使用ctx.save() 方法进行存储画布原点的位置。

那么 save 能存储什么呢？他能存储 translate rotate scale 的值。因为这些改变，都是全局的。

接下来，把图片放进canvas 画布里面。

还有另外一种填充图片的方法：

drawImage方法，可选参数：

填充文字

阴影效果

最后，补充：

改变线的粗细

改变线的颜色

改变线起始与结尾的样式

改变线于线之间的连接点样式

H5系列之canvas的更多相关文章

H5系列之History（必知必会）
H5系列之History(必知必会) 目录概念兼容性属性方法 H5方法概念理解History Api的使用方式目的是为了解决哪些问题作用:ajax获取数据时 ...
H5上传图片之canvas
H5上传图片之canvas,使用canvas处理压缩图片再上传 html代码: <form action="" method="post"> < ...
[Web Chart系列之六] canvas Chart 导出图文件
前言博主正在参加CSDN2013年度博客之星评选,如果这篇文章对您有用,请投他一票: 投票地址:http://vote.blog.csdn.net/blogstaritem/blogstar2013 ...
零元学Expression Blend 4 - Chapter 9 用实例了解布局容器系列-「Canvas」
原文:零元学Expression Blend 4 - Chapter 9 用实例了解布局容器系列-「Canvas」本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blen ...
用H5中的Canvas等技术制作海报
在去年的时候也实现过合成海报的功能,不过当时时间仓促,实现的比较简单. 就一个旋转功能,图片也不能拖动放大,也不能裁剪. 去年的实现可以参考<移动图片操作--上传>和<移动图片操作- ...
H5神器之canvas应用——网页修改保存图片
因为最近项目上的要求,需要在页面中可以对一张图片进行涂改和添加文字,然后再保存到(服务器)本地,因为也是第一次接触这方面的,然后爬网页啊爬网页,之后发现了一款adobe开发的一款插件,适合 Anroi ...
关于H5中的Canvas API的探索
Canvas API 是H5中比较炫酷的一部分内容.可以通过它动态的生成和展示图形.图表.图像以及动画.下面我将学习一下Canvas API. 最后有书籍和源码. 一.概述: 1.基本元素: 在网页上 ...
从web图片裁剪出发：了解H5中的canvas
本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 重说三,好了,现在进 ...
H5之画布canvas小记，以及通过画布实现原子无规则运动
我们知道html在h5出之前就仅仅只是一个标签,一个标记,语义化并不强,后来新增的标签如video,audio都是语义化更强(让人一看就懂是什么东西,反正我是这么理解的,一个div不代表着什么),本身 ...

随机推荐

Redis学习笔记（二）——Keys通用操作
1.查询所有key: keys * 2.*通用符(代表0或多),查询所有以n(*)开头的key: keys n* 3.?通用符(代表1个字符): key n? 4.del删除key [key1 key ...
vue-cli3使用jq
第一步安装 npm install jquery --save 第二部配置vue.config.js, 没有这个文件就创建主要是框框出来的那些: 忽略我配置的另一个uglifyjs-webpack- ...
oracle基本学习
oracle目录及卸载 1.oracle的目录介绍: oradata:数据库存储文件的目录 db_home: network >admin:配置网络服务和监听器服务 jdk:oracle自带jd ...
plc模拟量采集模块的作用
在工业控制中,某些输入量(如压力.温度.流量.转速等)是连续变化的模拟量,某些执行机构(如伺服电动机.调节阀.记录仪等)要求PLC输出模拟信号,而PLC的CPU只能处理数字量.模拟量首先被传感器和变送 ...
Java学习的第一天
1.今天安装了Java操作环境,并运行了helloworld的程序 2.在安装过程中,文件路径丢了,与c++和c之前的差异使我难堪 3.明天准备完成小学期任务以及继续往下学习Java语言读大道至简
iNeuOS工业互联平台，WEB组态（iNeuView）增加工程视图导入、导出功能，及优化和修复，发布：v3.2.1版本
目录 1. 概述... 2 2. 平台演示... 2 3. 导出组态工程文件... 2 4. 导入组态工程文件... 3 1. 概述 iNe ...
phpword读取内容和样式生成新的内容
table样式还未读出正在测试中, 目前有 rows cell textrun等样式顺序不固定可以设定 <?php require 'vendor/autoload.php'; use P ...
不断要求用户输入学生姓名,输入q结束.
while (true) { Console.WriteLine("请输入学生姓名"); string a = Console.ReadLine(); if (a == " ...
CentOS7下一键小白搭建seafile pro云盘
搭建前准备工作 vps或者云服务器,个人搭建使用建议腾讯云,公司搭建使用建议阿里云. 没有服务器的小伙伴可以下面链接进入看下,腾讯云的配置带宽会比阿里云的好点. 阿里云新人优惠服务器腾讯云云上特惠 ...
经典c程序100例==51--60
[程序51] 题目:学习使用按位与 & . 1.程序分析:0&0=0; 0&1=0; 1&0=0; 1&1=1 2.程序源代码: #include " ...

H5系列之canvas

H5系列之canvas的更多相关文章

随机推荐

热门专题