文档章节

H5系列之canvas

o
 osc_g8254g7s
发布于 2019/08/21 21:01
字数 2128
阅读 0
收藏 0

精选30+云产品,助力企业轻松上云!>>>

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方法,可选参数:

 

填充文字

 

阴影效果

 

最后,补充:

改变线的粗细

 

改变线的颜色

 

改变线起始与结尾的样式

 

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

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
CANVAS

知乎网页上屏幕截图功能的实现 介绍了知乎和 google keep 所提供的屏幕截图反馈功能,以及网页中用 js 截图的实现办法 Canvas 基础系列(零)之大转盘九宫格刮刮卡抽奖插件封装 前面的几期内...

掘金官方
2017/12/12
0
0
Java开发人员必须注重微信H5牛牛出租平台开发的理由

Java开发人员都是依靠微信H5牛牛开发租售平台(h5.fanshubbs.com)作为应用程序的前端。但进程往往令人懊丧:HTML笨拙,JavaScript缓慢而难用,缺少调试东西,想让应用程序兼容一切的浏览器是一...

可令肌肤
2018/01/11
26
0
Java开发人员必须注重使用HTML5微信H5牛牛开发租售平台的理由

Java开发人员都是依靠微信H5牛牛开发租售平台(h5.fanshubbs.com)作为应用程序的前端。但进程往往令人懊丧:HTML使用微信H5牛牛开发租售平台Q_1687054422笨拙,JavaScript缓慢而难用,缺少调试...

Q1687054422
2018/01/06
0
0
H5系列之svg

svg呢,跟canvas其实都是用来画图的,只不过svg画的图,是矢量图,矢量图有个特点是,放大缩小,不会失真,canvas呢,是逐像素进行渲染的。 也就是,他依赖分辨率,会根据分辨率来决定图形是...

osc_x690pobu
2019/08/27
1
0
自制团队开发canvas解决方案

最近跟同学参加了大广赛,准备做一个H5交互的产品,动画与交互,最先打算采用的就是使用canvas来实现,但是她们对代码并不敏感哪怕是面向对象开发,同样也要去面对一堆的对象以及变量,稍有不...

山鬼
2018/05/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Eclipse_JavaEE_Tomcat_MySQL环境配置

安装java环境,配置系统变量(JAVA_HOME,绝对路径) 下载eclipse+Tomcat+mysql window——》preference——》server——》runtime——》tomcat环境 项目右键build path 配mysql jar ,libra...

愿有时光可回首
今天
24
0
MySQL原理 - InnoDB引擎 - 行记录存储 - Redundant行格式

本文基于 MySQL 8 在上一篇:MySQL原理 - InnoDB引擎 - 行记录存储 - Compact格式 中,我们介绍了什么是 InnoDB 行记录存储以及 Compact 行格式,在这一篇中,我们继续介绍其他三种行格式。 ...

zhxhash
今天
29
0
leetcode面试题 17.13(恢复空格)--Java语言实现

求: 哦,不!你不小心把一个长篇文章中的空格、标点都删掉了,并且大写也弄成了小写。像句子"I reset the computer. It still didn’t boot!"已经变成了"iresetthecomputeritstilldidntboo...

拓拔北海
今天
19
0
B站跨年晚会究竟做对了什么?

燃财经(ID:rancaijing)原创 作者 | 赵磊 编辑 | 周昶帆 “补课”是《bilibili晚会 二零一九最美的夜》这个视频中,观众在前两分钟刷得最多的弹幕,寓意着观众是在元旦之后回来补看跨年晚会...

子乾建建_Jeff
01/07
63
0
关于Scrapy爬虫项目运行和调试的小技巧(上篇)

点击上方“Python爬虫与数据挖掘”,进行关注 回复“书籍”即可获赠Python从入门到进阶共10本电子书 今 日 鸡 汤 迟日江山丽,春风花草香。泥融飞燕子,沙暖睡鸳鸯。 扫除运行Scrapy爬虫程序...

yuhan336
04/02
26
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部