标签：圆形 界面 构建 .com 动态 移动端 领域 web fill
一、canvas简介
1.1什么是canvas？
是HTML5提供的一种新标签，ie9才开始支持的
<canvas></canvas>
英 [‘k?nv?s] 美 [‘k?nv?s] 帆布 画布
canvas是一个矩形区域的画布，可以用JS控制每一个像素在上面绘画。
canvas标签使用JavaScript在网页上绘制图像，本身不具备绘图功能。
canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
1.2canvas主要应用的领域
1可视化数据：各类统计图表，比如：百度的echart
2场景秀：用canvas实现动态的广告效果能够非常融洽的跨平台运行。如：手机中的微产品。在移动端兼容性很好
3游戏：canvas在基于Web的图像显示方面比Flash更加立体、更加精巧，canvas成为HTML5小游戏开发首选。现阶段h5做游戏，营业方式不是很明确。
4其他可嵌入网站的内容（多用于活动页面、特效）：类似图表、音频、视频，还有许多元素能够更好地与Web融合，并且不需要任何插件。
5趋势=>模拟器：无论从视觉效果还是核心功能方面来说，模拟器产品可以完全由JavaScript来实现。模拟真实硬件环境，如移动端各种类型手机。
6趋势=>远程计算机控制：canvas可以让开发者更好地实现基于Web的数据传输，构建一个完美的可视化控制界面。
7趋势=>图形编辑器：Photoshop图形编辑器将能够100%基于Web实现。
二、canvas绘制线条
2.1canvas标签语法和属性
canvas：画布油布的意思
标签名：canvas，双标签，需要闭合
单位：px，可以设置width和height属性，否则忽略单位。
width和height：默认300*150像素
注意：
不要用CSS控制它的宽和高，会导致内部图片被拉伸；
重新设置canvas标签的宽高属性会让画布擦除所有的内容；
可以给canvas画布设置背景色。
2.2浏览器不兼容处理
ie9以上才支持canvas，其他chrome、Safari、Opera都支持
只要浏览器兼容canvas，那么就会支持绝大部分API（个别最新API除外）
移动设备几乎支持canvas的所有API
2d的支持的都非常好，3d（webgl）ie11才支持，其他都支持
如果浏览器不兼容，最好进行友好提示，例如：
<canvas id="canvas">
你的浏览器不支持canvas，请升级浏览器。
</canvas>
如果浏览器不兼容，可以使用flash等方式进行替换。
2.3canvas绘图上下文context
context：canvas的上下文、绘制环境
上下文：是所有的绘制操作API的入口或者集合
canvas自身无法绘制任何内容，canvas的绘图是使用JS调用canvas的接口来完成的
context对象就是JavaScript操作canvas的接口
使用[CanvasElement].getContext(‘2d‘)来获取2d绘图上下文。
//获得画布
var canvas = document.getElementById(‘cavsElem‘);
//注意：2d小写，二维，3d：webgl
var ctx = canvas。getContext(‘2d‘);
三 基本的绘制路径
3.1canvas坐标系
canvas坐标系，从最左上角0,0开始。x向右增大，y向下增大
3.2 设置绘制起点（moveTo）
语法：ctx.moveTo(x,y);
解释：设置上下文绘制路径的起点。相当于移动画笔到某个位置
参数：x，y都是相对于canvas盒子的最左上角
注意：绘制线段前必须先设置起点，不然绘制无效
3.3绘制直线（lineTo）
语法：ctx.lineTo(x,y);
解释：从x，y的位置绘制一条直线到起点或者上一个线头点
参数：x，y线头点坐标
3.4路径开始和闭合
开始路径：ctx.beginPath();
闭合路径：ctx.closePath();
解释：如果复杂路径绘制，必须使用路径开始和结束
closePath：闭合路径会自动把最后的线头和开始的线头连在一起
beginPath：核心的作用是将不同绘制的形状进行隔离，每次执行此方法，表示重新绘制一个路径，跟之前的绘制的路径可以进行分开样式设置和管理
3.5描边（stroke）
语法：ctx.stroke();
解释：根据路径绘制线。路径知识草稿，真正绘制线必须执行stroke
stroke：（用笔等）画；轻抚；轻挪；敲击；划尾浆；划掉；（打字时）击打键盘 英 [str??k] 美 [strok]
canvas绘制的基本步骤：
第一步：获得上下文=>canvasElem.getContext(‘2d‘);
第二步：开始路径规划=>ctx.beginPath()
第三步：移动起始点=>ctr.moveTo(x,y)
第四步：绘制(点、线、面、图片……)=>ctx.lineTo(x,y)
第五步：闭合路径=>ctx.closePath();
第六步：绘制描边=>ctx.stroke();
html部分：
<canvas id="canvas">
当前浏览器不支持canvas，请升级浏览器版本
</canvas>
javascript部分：
//===============基本绘制api====================
//获得画布
var canvas = document.querySelector(‘#canvas‘);
//获得上下文
var ctx = canvas.getContext(‘2d‘);
canvas.width = 800; //设置标签的属性宽高
canvas.height = 600;
canvas.style.border = "1px solid #000";
//绘制三角形
ctx.beginPath(); //开始路径
ctx.moveTo(100,100); //三角形，左顶点
ctx.lineTo(300, 100); //右顶点
ctx.lineTo(300, 300); //底部的点
ctx.closePath(); //结束路径
ctx.stroke(); //描边路径
四、canvas绘制矩形
1快速创建矩形rect（）方法
语法：ctx.rect(x,y,width,height);
解释:x,y是矩形左上角坐标，width和height都是以像素计算
rect方法只是规划了矩形的路径，并没有填充和描边。
rect：abbr.矩形（rectangular）；收据（receipt）
2快速创建描边矩形和填充矩形
语法：ctx.strokeRect(x,y,width,height);
参数跟ctx.rect相同，注意此方法绘制完路径后立即进行stroke绘制
语法：ctx.fillRect(x,y,width,height);
参数跟ctx.rect相同，此方法执行完成后。立即对当前矩形进行fill填充
3清除矩形（clearRect）
语法：ctx.rect(x,y,width,height);
解释：清除某个矩形内的绘制的内容，相当于橡皮擦
五、canvas绘制
绘制圆形（arc）
概述：arc()方法创建弧/曲线（用于创建圆或部分圆）
语法：ctx.arc()（x,y,sAngle,eAngle,counterclockwise）;
arc:弧（度）弧形物；天穹
counter 反击，还击；反向移动，对着干；反驳。
解释：
x，y:圆心坐标
r：半径大小
sAngle：绘制开始的角度。圆心到最右边点是0度，顺时针方向弧度增大。
eAngle：结束的角度，注意是弧度。
counterclockwise：是否是逆时针。true是逆时针，false：顺时针（默认）
弧度和角度的转换公式：rad = deg*Math.PI/180;
在Math提供的方法中sin、cos等都是用的弧度
三角函数的补充
Math.sin(弧度)//夹角对面的边和斜边的比值
Math.cos（弧度）//夹角侧边与斜边的比值
圆形上面的点的坐标的计算公式
x = x0 + Math.cos(rad)*R;//x0和y0是圆心点坐标
y = y0 + Math.sin(rad)*R;//注意都是弧度
标签：圆形 界面 构建 .com 动态 移动端 领域 web fill
原文地址：http://www.cnblogs.com/lyp82nlf/p/6517468.html
