web前端移动端课程之canvas教程系列

`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前端移动端课程之canvas教程系列相关推荐

web前端/移动端H5博客专家博客大全--值得收藏的前端技术大牛博客地址
web前端/移动端H5博客专家博客大全--值得收藏的前端技术大牛博客地址 Huang Jie Blog .Com-前端开发 http://www.huangjieblog.com/?feed=r ...
web前端移动端项目测试的几种方法
web前端移动端项目测试的几种方法本人只是个做前端刚刚半年的小白技术还不熟练见识也不够广希望大家不喜勿喷如果有不对的地方欢迎大家指出我更加会努力的学习提高自己的水平! 本人只是 ...
阿里云视频直播 web前端[移动端] Aliplayer的简单案例
阿里云视频直播 web前端[移动端] Aliplayer的简单案例最近做了一个功能就是播放后台提供的各种直播视频,格式在未确定的情况下,刚开始以为简单的一个video标签就能播放视频,后面才发现各种 ...
千锋教育Web前端——PC端企业类型整页制作
千锋教育Web前端--PC端企业类型整页制作文章目录千锋教育Web前端--PC端企业类型整页制作一.PC端的布局二.源码 1.CSS源码 2.HTML源码三.运行结果一.PC端的布局通栏 ...
手把手教你构建一个web前端项目，全网最详细教程！
为什么80%的码农都做不了架构师?>>> 1. 选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种:选择现成的项目模板.自己搭建项目骨架. 选择一个现成项目模 ...
web前端-移动端HTML5微商城项目实战分享案例
HTML5+css3移动端H5项目案例实战.web前端开发移动端webApp案例源码.H5爆款试客商城.手机商城网站实例源码模板!!! 主张原创设计,拒绝数量.追求质量,100 ...
Web前端——移动端页面开发
Web前端笔记第五部分:移动端页面开发 1. 移动端与PC端页面布局区别视口视口是移动设备上用来显示网页的区域,一般会比移动设备可视区域大, 宽度可能是980px或者1024px,目的是为了显示 ...
web前端PC端百度地图的开发指导
先看效果图片: 最终效果描述: 1.搜索:有搜索提示,并且可以根据选择进行定位: 2.获取经纬度:点击地图中某点,在文本框中获取当前点的经纬度的值: 3.获取详细地址:点击地图中某点时,将该点的详细地 ...
html文本打印lt;igt;字段,Web前端学习第九课，使用文本格式化标签
1.如何给元素添加样式? 通过前面的学习大家知道,在web前端中,元素所显示出来样子称为表现,专业处理元素长什么样子的技术主要是CSS(层叠样式表). 不过在HTML语言中,你可以用以下两种方式先进行 ...

web前端移动端课程之canvas教程系列

`canvas`

`canvas`介绍

`canvas`的基本使用

`canvas`画线的操作

`canvas`路径绘制的细节操作

`canvas`绘制弧线操作

`canvas`绘制文本：

`canvas`对图片的绘制操作(重点)：

web前端移动端课程之canvas教程系列相关推荐

最新文章

热门文章

web前端移动端课程之canvas教程系列

canvas

canvas介绍

canvas的基本使用

canvas画线的操作

canvas路径绘制的细节操作

canvas绘制弧线操作

canvas绘制文本：

canvas对图片的绘制操作(重点)：

web前端移动端课程之canvas教程系列相关推荐

最新文章

热门文章

`canvas`

`canvas`介绍

`canvas`的基本使用

`canvas`画线的操作

`canvas`路径绘制的细节操作

`canvas`绘制弧线操作

`canvas`绘制文本：

`canvas`对图片的绘制操作(重点)：