正文 

当前位置： 首页 > 开发 > java教程

web前端移动端课程之canvas教程系列(代码片段)

tea_year tea_year     2022-12-31     796

关键词：

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对象的上下文对象的方法：
    1. moveTo(x,y)：将画笔移动到指定坐标，就是开始画的位置
    2. lineTo(x,y)：线绘制的结束位置坐标
    3. lineWidth：线宽的设置
    4. stroke()：画描边的线
    5. fill()：画填充的线，但是线与线之间必须有交点才可以
    6. lineCap：设置线条末端样式，butt是默认值，还有round和square两种，这个其实就是设置线帽的样式
    7. 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+ 查看详情