03、HTML5-Canvas(画布)

2018-10-20 本文已影响0人王梓懿_1fbc

一、什么是 Canvas？

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像
画布是一个矩形区域，可以控制其每一像素
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

二、canvas基本使用

添加canvas元素(创建画布)

// 在页面中添加一个canvas标签(默认画布是300*150)
<canvas id="view1" width="300" height="300">
      <i>不支持canvas浏览器</i>
 </canvas>

通过JavaScript绘制图像

<script>
    // 1、获取到canvas元素
    var oView = document.getElementById("view1");
    // 2、通过getContext获取绘制环境(多种绘制路径、矩形、圆形、字符以及添加图像的方法)
    var oGC = oView.getContext('2d');
    // 3、填充矩形
    oGC.fillRect(30, 30, 100, 100);
</script>

三、绘制的方法

绘制矩形
1、fillRect(X, Y, W, H) --- 填充矩形(默认是黑色)

    X: 矩形左上角的X坐标
    Y: 矩形左上角的Y坐标
    W: 矩形宽度
    H: 矩形高度

2、 strokeRect(L, T, W, H) --- 边框矩形(默认1px黑色边框)

 X: 矩形左上角的X坐标
 Y: 矩形左上角的Y坐标
 W: 矩形宽度
 H: 矩形高度

注: strokeRect(30, 30, 100, 100); 表从(30, 30)位置开始，绘制宽高为100的矩形；但是边框实际显示2px并不为1px，原因是边框绘制是围绕边框线往两边延伸的，即左边0.5px右边0.5px，但实际显示都只能是整数，即变为左边1px右边1px。【解决方式 strokeRect(30.5, 30.5, 100, 100)】

设置绘图
1、fillStyle: 填充样式
2、lineWidth: 线宽
3、strokeStyle: 边线样式
边界绘制
1、lineJoin: 边界连接点样式

  miter(默认)/round(圆角)/bevel(斜角)

2、lineCap: 端点样式(边线的两个端点)

 butt(默认)/round(圆角)/square(高度多出为宽一半的值)

绘制路径
1、beginPath(): 开始绘制路径
2、closePath:() 结束绘制路径(有闭合作用)
3、moveTo(x, y): 移动到绘制的新目标点
4、lineTo(x, y): 新的目标点
5、stroke(): 画线(默认黑色)
6、fill(): 填充(默认黑色)
7、rect(): 矩形区域
8、clearRect(x, y, w, h): 删除画布的矩形区域
9、save(): 保存当前图像状态的一份拷贝
10、restore(): 恢复上次保存的图片状态

案例: 简易画板
案例: 移动的矩形

四、其他曲线

绘制圆形

arc(x, y, 半径, 起始弧度, 结束弧度, 旋转方向)
  - x/y: 起始位置
  - 半径: 圆形的半径大小
  - 弧度与角度的关系: 弧度 = 角度*Math.PI / 180;
  - 旋转方向: 顺时针(默认)false、逆时针true【起始位置是在3点钟方向!!!】

案例: 绘制一个钟表

绘制其他曲线
1、arcTo(x1, y1, x2, y2, r)

- 第一组坐标、第二组坐标、半径
oGC.moveTo(50, 50);  // 起始点
oGC.quadraticCurveTo(30, 220 ,250, 250); // 第二组左边、结束坐标
oGC.stroke();


  2、quadraticCurveTo(dx, dy, x1, y1)

贝塞尔曲线: 第一组控制点、第二组结束坐标
oGC.moveTo(100, 200); // 起始点
oGC.quadraticCurveTo(100, 100, 200, 200);
oGC.stroke();

![贝塞尔曲线1](https://img.haomeiwen.com/i1801379/9bdb2ce92dc203db.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  3、bezierCurveTo(dx1, dy1, dx2, dy2, x1, y1)

贝塞尔曲线: 第一组控制点、第二组控制点、第三组结束坐标
oGC.moveTo(50, 50); // 起始点
oGC.bezierCurveTo(30, 140, 270, 180, 250, 250);
oGC.stroke();

![贝塞尔曲线2](https://img.haomeiwen.com/i1801379/a877a91ce0b82587.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

## 五、变换
- translate(x, y)

偏移: 从起始点为基准，移动到当前坐标位置
oGC.translate(100, 100);
// 起始点原本是(0,0)，因为偏移，所以变为(100, 100)
oGC.fillRect(0, 0, 100, 100);


- rotate(angle)

旋转: 参数是弧度
oGC.rotate(10*Math.PI/180);
oGC.fillRect(100,100,100,50);


- scale(x, y)

缩放: 默认不缩放即是1
oGC.scale(0.7, 0.7);
oGC.fillRect(100, 100, 100, 100);


> 案例: 旋转并缩放的方块

## 六、绘制图片
- drawImage(oImg, x, y, w , h): 插入图片

oImg: 插入的图片
x/y: 坐标位置
w/h: 图片宽高

// 创建图片对象
var oImg = new Image();
// 获取图片
oImg.src = 'qq.png';
// 绘制图片
oGC.drawImage(oImg, 0, 0, 100, 100);

图片预加载: 在onload中调用方法(先加载完图片，后通过canvas绘制)
oImg.onload = function(){ // 图片加载完成 }

> 案例: 图片旋转效果

- createPattern(oImg, repeat): 设置背景

平铺方式: repeat/repeat-x/repeat-y/no-repeat

// 创建图片对象
var oImg = new Image();
// 获取图片
oImg.src = 'qq.png';
// 设置背景
var bg = oGC.createPattern(oImg, 'repeat-x');
// 以背景形式填充
oGC.fillStyle = bg;
// 如果需要移动，通过translate操作
oGC.translate(100, 100);
// 绘制矩形
oGC.fillRect(0, 0, 100, 100);


## 七、渐变
- createLinearGradient(x1, y1, x2, y2): 线性渐变

x1/y1: 起始点坐标
x2/y2: 结束点坐标
addColorStop(位置，颜色): 添加渐变点

// 创建线性渐变
var obj = oGC.createLinearGradient(60, 60, 170, 170);
// 添加渐变点(可以添加多个)
obj.addColorStop(0, 'purple');
obj.addColorStop(0.5, 'yellow');
obj.addColorStop(1, 'red');
// 设置填充
oGC.fillStyle = obj;
// 绘制矩形
oGC.fillRect(30, 30, 200, 200);

- createRadialGradient(x1, y1, r1, x2, y2, r2): 放射性渐变

x1/y1/r1: 第一个圆的坐标和半径
x2/y2/r2: 第二个圆的坐标和半径

// 放射性渐变
var obj = oGC.createRadialGradient(150, 150, 150, 150, 150, 60);
// 添加渐变点(可以添加多个)
obj.addColorStop(0, 'white');
obj.addColorStop(0.5, 'yellow');
obj.addColorStop(1, 'red');
// 设置填充
oGC.fillStyle = obj;
// 绘制矩形
oGC.fillRect(0, 0, 300, 300);


## 八、绘制文本
- strokeText(text，x, y): 文字边框

oGC.strokeText('你是谁啊?', 2, 2);


- fillText(text, x, y): 文字填充

oGC.fillText('你是谁啊?', 0, 0);


- font: 文字属性

// 文字大小和文字类型(必须得写，另外样式很少)
oGC.font = '30px impact';


- textAlign(end/right/center): 水平对齐方式

oGC.textAlign = 'left';


- textBaseline(top/middle/bottom): 垂直对齐方式

oGC.textBaseline = 'top';


- measureText(): 文本宽度(只有宽度)

var width = oGC.measureText('你是谁啊?').width

> 案例: 文本居中设置

- shadowOffsetX: x轴偏移

oGC.shadowOffsetX = 5;
oGC.shadowColor = 'red';

> 文字阴影属性text-shadow: x y blur color
x       横向偏移
y       纵向偏移
blur        模糊距离
color       阴影颜色
例如: text-shadow: 3px 3px 5px red;

- shadowOffsetY: y轴偏移

oGC.shadowOffsetY = 5;
oGC.shadowColor = 'red';


- shadowBlur: 高斯模糊值

oGC.shadowBlur = 3;

> 图像处理软件会提供"模糊"（blur）滤镜，使图片产生模糊的效果，"模糊"的算法有很多种，其中有一种叫做[高斯模糊](http://en.wikipedia.org/wiki/Gaussian_blur)（Gaussian Blur）。高斯模糊的原理中，它是根据[高斯模糊](http://en.wikipedia.org/wiki/Gaussian_blur)调节像素色值，它是有选择地模糊图像。

- shadowColor: 阴影颜色

oGC.shadowColor = 'red';


## 九、像素操作
- getImageData(x, y, w, h): 获取图片数据

var oImg = oGC.getImageData(0, 0, 100, 100);


- putImageData(获取图像, x, y): 设置新的图片数据

oGC.putImageData(oImg, 100, 100);


- 像素属性

width: 一行的像素个数
height: 一列的像素个数
data: 一个数组，包含每个像素的rgba四个值，注意每个值都在0~255之间的整数


- createImageData(w,h): 生成新的像素矩阵【初始值全透明的黑色，即(0,0,0,0)】

var oImg = oGC.createImageData(100, 100);

> 案例: 像素点方式显示文字

## 十、事件操作
- isPointlnPath: 是否在点击范围内

oView.onmousedown = function(ev){
ev = ev || window.event;
// 获取鼠标相对于画布的位置
var dowx = ev.offsetX;
var dowy = ev.offsetY;

// 判断是否在范围之内
if( oGC.isPointInPath(dowx, dowy) ){
    alert('我被点击了');
}

}


## 十一、将画布内容保存为图片

// 参数: canvas元素对象
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");

// 返回一个img对象
return image;
}


## 十二、图表库框架
Echarts，JS图标库框架，底层依赖与canvas类库(http://echarts.baidu.com/)

作者：西门奄
链接：https://www.jianshu.com/u/77035eb804c3
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

03、HTML5-Canvas(画布)

一、什么是 Canvas？

二、canvas基本使用

三、绘制的方法

四、其他曲线

猜你喜欢

热点阅读