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不代表着什么),本身 ...

随机推荐

java中true不是关键字？
java中true ,false , null在java中不是关键字,也不是保留字,它们只是显式常量值,但是你在程序中不能使用它们作为标识符. 其中const和goto是java的保留字.java中所 ...
JUC---08ForkJion(分支合并)
一.什么是ForkJion Fork/Join框架是Java7提供的并行执行任务框架,思想是将大任务分解成小任务,然后小任务又可以继续分解,然后每个小任务分别计算出结果再合并起来,最后将汇总的结果作为 ...
NB-IoT的RLC子层服务功能
NB-IoT只支持RLC子层的确认模式(Acknowledgement Mode,AM),不支持非确认模式(Unacknowledged Mode,UM). 对于支持UP模式的UE,NB-IoT支持R ...
Serilog 源码解析——总览
背景大家好,考虑到在最近这些天,闲来无事,找了个类库好好研究下别人写的高质量代码,颇有收获,打算和大家分享下.考虑到最近在自学 ASP.NET Core 的相关开发,对 Serilog 这个日志记录 ...
Git clone 克隆Github上的仓库，速度慢？
一. 终端输入: git config --global http.postBuffer 524288000 二. git替换https 三. windows 安装 https://motrix.ap ...
Mybatis执行SQL的完整过程及四大组件介绍
一切的执行从MapperProxy开始,MapperProxy是MapperProxyFactory使用SqlSession创建出来的.所以MapperProxy中包含SqlSession. 可以看到 ...
使用 Iceberg on Kubernetes 打造新一代云原生数据湖
背景大数据发展至今,按照 Google 2003年发布的<The Google File System>第一篇论文算起,已走过17个年头.可惜的是 Google 当时并没有开源其技术,& ...
JDK新特性-Lambda表达式的神操作
一.Lambda表达式的介绍 Lambda表达式是 Java8 中最重要的新功能之一.使用 Lambda 表达式可以替代只有一个抽象函数的接口实现,告别匿名内部类,代码看起来更简洁易懂.Lambd ...
“谈谈MySQL的基数统计”
** 目录推荐阅读原文链接一.基数是啥? 二.InnoDB更新基数的时机? 三.基数是估算出来四.持久化基数四.如何主动更新基数? Hi,大家好!我是白日梦. 今天我要跟你分享的话题是:&qu ...
Java—递归
递归 1. 概述方法中调用当前方法 2. 递归需要注意的事项递归次数不能过多,否则内存溢出 3. 案例 3.1 获取指定目录下的文件名 public class AllDirPath { /* * ...

H5系列之canvas

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

随机推荐

热门专题