关键词:
canvas
canvas
介绍
canvas
是一个客户端浏览器里的画图技术,canvas
也是h5
的一个新标签,canvas
标签就已经提供了一张所谓的画布,那么再通过js
的canvas
一些操作就可以达到最终画图的效果
canvas
的基本使用
-
主要就是如何通过
js
操作canvas
才是关键所在<canvas id="canvas" width="800" height="600">对不起,您的浏览器不支持canvas,请升级到最新版本</canvas> <script> //获取canvas的DOM对象 var canvas = document.querySelector('#canvas'); //获取canvas的画图的上下文对象,值为2d表示画2d平面图,值为webgl表示画3d立体模型图 var ctx = canvas.getContext('2d'); //填充一个样式,这个样式是给你要操作的形状的样式 ctx.fillStyle = 'red'; //填充一个矩形,前两个参数是矩形的位置,后两个参数是矩形的宽高 ctx.fillRect(50,100,200,200); </script>
-
canvas
画形状提供了三种方法,三个方法参数一样,都是(x,y,width,height)
:fillRect()
:填充一个矩形,默认是黑色strokeRect()
:绘制一个矩形,没有填充,只是一个描边的矩形,默认描边是黑色clearRect()
:以矩形的形状来清除一个区域
-
因此可以发现,想画其他形状了,就要通过其他方法来操作了,在
canvas
里带有stroke
的方法都是画描边的形状,而带有fill
的方法都是填充的形状,那么对描边形状设置样式就是对属性strokeStyle
,对填充形状设置样式就是fillStyle
canvas
画线的操作
- 画线操作分下边几个步骤,都是canvas对象的上下文对象的方法:
moveTo(x,y)
:将画笔移动到指定坐标,就是开始画的位置lineTo(x,y)
:线绘制的结束位置坐标lineWidth
:线宽的设置stroke()
:画描边的线fill()
:画填充的线,但是线与线之间必须有交点才可以lineCap
:设置线条末端样式,butt
是默认值,还有round
和square
两种,这个其实就是设置线帽的样式lineJoin
:设置线条与线条交点处的样式。有miter
(默认值)、round
和bevel
三个值
canvas
路径绘制的细节操作
-
canvas
在绘制图形时,如果一段图形操作完毕后想要继续绘制其他图形了,则必须开启新路径操作,并且要闭合绘制路径-
beginPath()
:将context
对象里原来的路径清除掉,但不会对已经画到界面上的路径造成影响。这样就可以终止以前的路径,开启一个新路径进行操作 -
closePath()
:关闭路径,意思就是从当前的坐标点直接连接到你开始的坐标点,就是moveTo
的坐标点,这种属于自动关闭闭合路径操作摘要:相当于是手动关闭路径了就从
moveTo
开始,到最后lineTo
结束。自动关闭路径就是从moveTo
开始,利用closePath
来关闭路径。fill
填充操作也可以关闭路径,但会填个颜色。绘制两个三角形(无填充与有填充)
画布
盒子移动
-
canvas
绘制弧线操作
-
arc()
:前两个参数是绘制的坐标位置,第三个参数是弧线的半径,第四个参数是开始时的角度位置,第五个参数是结束时的角度位置。角度位置理解请看下图:参数: 1 x坐标 2 y坐标 3 半径 4 开始的角度 5 结束的角度 Math.PI/180
案例:canvas时钟
canvas
绘制文本:
font
:绘制的文本字体样式操作textAlign
:文本的水平对齐方式textBaseline
:文本垂直对齐方式direction
:文本内容的显示方向。ltr
表示从左往右显示,rtl
表示从左往右显示fillText()
:绘制文本到canvas
上,第一个参数是文本内容,第二个和第三个参数表示文本的绘制位置坐标- strokeText():
measureText()
:参数就是要输出的文本内容,此方法作用就是返回文本的宽度,也就是测量文本宽度
canvas
对图片的绘制操作(重点):
-
drawImage()
:绘制图片的主要方法,需要先new Image()
来创建图片对象,并给对象指定src
后,就可以监听img
的load
事件来判断图片是否加载完成,加载完成后即可使用drawImage
方法绘制图片到canvas
上了。ctx.drawImage(img,x,y,w,h) // 把canvas转成一个当前图片文件的实际的base64格式路径 imgUrl = canvas.toDataURL('image/jpeg'); // 手机端 照片很大 上传 用canvas把图片重新绘制一下 (压缩)
* echarts: js插件 图表
web前端之移动端课程开发之06.bootstrap(代码片段)
Bootstarp介绍bootstarp是Twitter公司开发基于html,css,js的前端框架为实现web应用程序快速实现开发提供了一套前端工具包UI(userInterface用户界面)框架Bootstrap的特性响应式设计(css媒体查询一套样式实现各个终端尺寸适配)pc平板... 查看详情
web前端之移动端课程开发之06.bootstrap(代码片段)
Bootstarp介绍bootstarp是Twitter公司开发基于html,css,js的前端框架为实现web应用程序快速实现开发提供了一套前端工具包UI(userInterface用户界面)框架Bootstrap的特性响应式设计(css媒体查询一套样式实现各个终端尺寸适配)pc平板... 查看详情
web前端课程技术内容之如何做一个简单的手机端页面的翻页
【如何做一个简单的手机端页面的翻页】第一步:创建移动端页面内HTML+CSS【注】可用弹性布局但需要注意的是外层盒子的定位第二步:思考问题要实现怎样的效果?手指滑动时触发事件【左右】两个方向2.点击footer部分的下标... 查看详情
web前端课程技术内容之如何做一个简单的手机端页面的翻页
【如何做一个简单的手机端页面的翻页】第一步:创建移动端页面内HTML+CSS【注】可用弹性布局但需要注意的是外层盒子的定位第二步:思考问题要实现怎样的效果?1.手指滑动时触发事件【左右】两个方向2.点击footer部分的下标... 查看详情
web前端培训课程需要学习哪些方面的技术
参考技术AWEB前端培训课程需要学习以下8方面的技术:1、前端核心基础:HTML+_CSS核心、【JavaScript基础语法】、JavaScript面向对象、JavaScriptDOM和BOM编程、jQuery框架。2、HTML5+CSS3+移动端核心:HTML5新特性、Canvas专列、CSS3新特性、CSS3... 查看详情
html5移动端web
...locationAPI本地存储以及离线应用WebWorkers、WebWebSocketAPI移动前端开发可分为:手机网页开发。这部分跟web前端开发差别不大,使用的技术都 查看详情
移动端web开发前端知识整理
...14/mobile-web-front-end-collections/ 最近整理的移动端Web开发前端知识,不定期更新。HTML5可以做什么拍照获取地理位置手势canvas绘图和动画(硬件加速)localstorage,本地缓存HTML5动画效果demohttp://fff.cmiscm.com/#!/mainCS 查看详情
web前端培训都有哪些课程
...技术-网站前后端交互、jQuery交互效果开发第三阶段NodeJS前端架构及后台开发:版本控制工具、NodeJS核心技术第四阶段前端框架:Vuejs全家桶-Vue、React框架-React、微信小程序、Flutter第五阶段小程序开发:能够独立开发小程序,提... 查看详情
前端移动端开发之rem(代码片段)
前言作为一名前端工程师,我们不仅要会PC端开发,还要会移动端开发,而且现在移动端占据主要流量,所以掌握移动端开发的技能更是必须的。 那么进行移动端的开发,什么是必须,我们想要的效果是什么?自适应。对,... 查看详情
想去爱前端培训学前端,要多少钱,要学多久
...阶段:CSS基础和高级技巧第四阶段:静态网站制作项目爱前端注重基础的夯实,基础不好,后续的学习内容犹如空中楼阁。在基础课程的学习中,学员将会掌握制作漂亮的网页的要领。在老师的带领下,初级的学习旨在帮助学员... 查看详情
10-移动端开发教程-移动端事件(代码片段)
在前端的移动Web开发中,有一部分事件只在移动端产生,如触摸相关的事件。接下来给大家简单总结一下移动端的事件。1.PC端事件在移动端的兼容问题1.1click事件的200~300ms延迟问题由于移动端默认的布局视口宽度是980像素,所以... 查看详情
flutter系列之:移动端手势的具体使用(代码片段)
简介之前我们介绍了GestureDetector的定义和其提供的一些基本的方法,GestureDetector的好处就是可以把任何一个widget都赋予类似button的功能。今天将会通过几个具体的例子来讲解一下GestureDetector的具体使用。赋予widget可以点击的功能... 查看详情
canvas实操之绘制机器猫&&实现防伪刮图(代码片段)
...领域博主、CSDN原力计划作者🔥🔥本文已收录于前端系列教程:《前端系列教程》🔥🔥热门专栏推荐:《Django框架从入门到实战》、《爬虫从入门到精通系列教程》、《爬虫高级》、《前端系列教程》、... 查看详情
朱朝兵《web前端开发之html5+css3快速入门》课程资料在线学习
《Web前端开发之HTML5+CSS3快速入门》【课程简介】本课程由一直专注前端技术与Discuz模板设计与制作!DZ起点网创始人朱朝兵出品,通过本课程学习,即可掌握html5的基本结构,还可以熟悉掌握CSS3新增的属性,并可以独立完成一些... 查看详情
移动端web开发初探之vuejs的简单实战
...移动端全屏背景CSS移动端动画初探meta标签这点与在PC端写前端有着很大的区别,移动端的meta标签简直多。我就说说我所用到的标签。< 查看详情
web前端的内容多吗?好学不?
您好,web前端的内容主要有8个阶段,web前端是比较好学的,零基础学习web前端都是没有问题的,现在网上有很多web前端的视频,你可以学习。阶段1.前端核心基础HTML+_CSS核心、JavaScript基础语法、JavaScript面向对象、JavaScriptDOM和BOM... 查看详情
vue系列之vant移动端组件库的使用(代码片段)
#通过npm安装#查看是否安装完成#main.js引入vant组件#按钮使用例子:<van-buttontype="default">默认按钮</van-button>更多组件使用查看:https://youzan.github.io/vant/?source=vuejsorg#/zh-CN/button 查看详情
html5与移动端web
...locationAPI本地存储以及离线应用WebWorkers、WebWebSocketAPI移动前端开发可分为:手机网页开发。这部分跟web前端开发差别不大,使用的技术都是html+ 查看详情