html5canvas如何选择本地图片

今天小编将分享前端开发中必学的知识点，HTML5中关于canvas(画布)的知识点；

基本内容

Canvas，是HTML5中所有新特性目前应用最广泛的一个标签，替代引入的图片(图形)，用途非常广泛如（因此这个标签相当重要）：

1.完成HTML页面中的图形绘制

2.实现网络游戏或单机游戏(网页游戏)

3.在HTML页面中绘制图表

4.饼状图

5.柱状图

6.折线图

7.网页游戏

...

Canvas的发展方向，目前主流的游戏开发引擎之一，如：白鹭引擎 - HTML5、Cocos-JS - HTML5、掌握物理系统、掌握精灵系统(地图)、HTML5网页游戏。

需要特别注意的是：Canvas作为HTML页面的元素出现、在Canvas绘制的图形与HTML页面是无关的、利用DOM定位绘制的图形、元素的事件不能绑定绘制的图形

如何使用Canvas（分2步骤）

HTML页面部分：定义<canvas>元素、建议使用width和height属性设置<canvas>元素的宽度和高度

JavaScript部分：获取HTML页面中的<canvas>元素、通过getContext()方法创建画布对象、该方法接收一个参数 - 创建二维或三维图形

需要特别注意的是：该参数为字符串类型、"2d"或"3d"中的"d"必须小写、目前几乎都是"2d"效果、使用Canvas提供的API完成需求。

常见的应用

应用一：绘制图形

fillRect(x,y,width,height) - 绘制实心矩形

x和y - 表示绘制矩形的左上角的坐标值(x,y)

width - 表示绘制矩形的宽度

height - 表示绘制矩形的高度

strokeRect(x,y,width,height) - 绘制空心矩形

x和y - 表示绘制矩形的左上角的坐标值(x,y)

width - 表示绘制矩形的宽度

height - 表示绘制矩形的高度

clearRect(x,y,width,height) - 清除指定区域的矩形

x和y - 表示绘制矩形的左上角的坐标值(x,y)

width - 表示绘制矩形的宽度

height - 表示绘制矩形的高度

设置样式

fillStyle - 设置填充样式

strokeStyle - 设置描边样式

globalAlpha - 设置透明度(0-10-100-10-1000-10-1000000-10-10000-10-10000-10-10000-10-10000-10-1000-10-100000-100-100-1)

需要特别注意的是：先设置样式,再绘制图形，每改变一次样式,都需要重新设置样式，填充样式与描边样式互不干扰

应用二：线性渐变

createLinearGradient(x1,y1,x2,y2)

线性渐变具有一个基准线

射线(扇形)渐变

createRadialGradient(x1,y1,r1,x2,y2,r2)

射线渐变具有两个基准圆

设置渐变颜色

addColorStop(position,color)方法

color - 颜色

实现步骤如下：

1.设置线性渐变或扇形渐变

2.返回渐变对象

3.渐变对象设置渐变的颜色

4.设置填充或描边样式为渐变

应用三：绘制文字

设置属性：font - 用法与CSS中的font一致

对齐方式：

textAlign - 水平对齐

left - 基准线在文字的左边

center - 基准线在文字的中间

right - 基准线在文字的右边

textBaseline - 垂直对齐

top - 基准线在文字的上边

middle - 基准线在文字的中间

bottom - 基准线在文字的下边

hanging - 悬挂基线

alphabetic - 字母基线

绘制方法

fillText(text,x,y) - 绘制实心文字

text - 设置绘制的文字内容

x和y - 设置绘制文字的坐标值

strokeText(text,x,y) - 绘制空心文字

text - 设置绘制的文字内容

x和y - 设置绘制文字的坐标值

设置阴影

shadowColor - 设置阴影颜色

shadowOffsetX - 设置阴影水平位置

正值 - 阴影向右移动、0 - 阴影不移动、负值 - 阴影向左移动

shadowOffsetY - 设置阴影垂直位置

正值 - 阴影向下移动、0 - 阴影不移动、负值 - 阴影向上移动

shadowBlur - 设置阴影的程度

值的类型为Number、值越大,阴影效果越明显