1. Canvas
-
Canvas是HTML5新增的组件，它就像一块幕布，可以用JavaScript在上面绘制各种图表、动画等。
只能够js脚本驱动是Canvas的特点。 -
canvas元素
<canvas id='mycanvas' width=400 height=400>
Your browser does not support the canvas element.
</canvas>
- 支持
canvas的浏览器会只渲染canvas标签，而忽略其中的替代内容。不支持canvas的浏览器则会直接渲染替代内容。 - 说明
canvas内部是不可以嵌套其他dom结构的。
-
CanvasRenderingContext2D对象
所有的绘图操作都需要通过这个对象完成。
image.png - 绘制折线路径
//canvas元素
var c=document.getElementById('mycanvas');
//context对象
var ctx=c.getContext('2d');
ctx.beginPath();
//①定义样式
ctx.strokeStyle='green'; //颜色
ctx.lineWidth=20; //线宽
ctx.lineCap='square'; //端点
ctx.lineJoin='round'; //拐点
//②定义路径
ctx.moveTo(50,50); //起点
ctx.lineTo(100,100); //拐点
ctx.lineTo(50,200); //终点
ctx.closePath(); //闭合
//③绘制
ctx.stroke();
image.png
-
canvas元素必须通过width、height设置宽高。重新设置width或height，画布中任何已绘对象都将被清除。 - 每一个
canvas元素仅有一个context对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法和属性。 - 定义样式和定义路径(位置尺寸)的相对位置可调整，但绘制必须在定义样式和定义路径(位置尺寸)之后，否则样式和路径无法生效。
- 若未定义样式，则为默认样式；若未修改样式，则为上次样式。
- 绘制其它路径
//矩形路径
//位置(50,20)，尺寸(200,200)
ctx.rect(50,20,200,200);
//③绘制
ctx.stroke();
//原型路径
//②定义位置尺寸
//中心点坐标(100,70),半径50,开始角180度，结束角0度，逆时针。
ctx.arc(100,70,50,Math.PI,0,true);
//③绘制
ctx.stroke();
- 绘制笑脸
ctx.clearRect(0, 0, 200, 200); // 擦除(0,0)位置大小为200x200的矩形，擦除的意思是把该区域变为透明
ctx.fillStyle = '#dddddd'; // 设置颜色
ctx.fillRect(10, 10, 130, 130); // 把(10,10)位置大小为130x130的矩形涂色
// 利用Path绘制复杂路径:
var path=new Path2D();
path.arc(75, 75, 50, 0, Math.PI*2, true);
path.moveTo(110,75);
path.arc(75, 75, 35, 0, Math.PI, false);
path.moveTo(65, 65);
path.arc(60, 65, 5, 0, Math.PI*2, true);
path.moveTo(95, 65);
path.arc(90, 65, 5, 0, Math.PI*2, true);
ctx.strokeStyle = '#0000ff';
ctx.stroke(path);
image.png
- 绘制图片
var img = new Image()
img.src = src
img.onload=function(){
//剪切位置(0,0),剪切尺寸(600,600),
//放置位置(0,0),放置尺寸(100,100);
ctx.drawImage(img,0,0,600,600,0,0,100,100);
}
image.png
-
canvas动画
var walk = require('../assets/1.jpg');
var img=document.createElement('img');
document.body.appendChild(img)
img.src=walk
img.onload=function(){
var x=0;
setInterval(function(){
ctx.clearRect(0,0,500,500);
ctx.drawImage(img, x,0,180,400,0,0,180,400);
x+= 180;
if (x>=900) {
x=0
};
},100)
};
| 对比 | Canvas |
SVG |
|---|---|---|
| 操作对象 | 基于像素 | 基于图形元素 |
| 元素 | 单个HTML元素 |
多种图形元素(Rect,Path,Line...) |
| 驱动 | 脚本驱动 | 支持脚本和CSS
|
| 交互粒度 | 用户交互到像素点(x, y)
|
用户交互到图形元素 |
| 性能 | 适合较小面积，较多的对象 | 适合较少的对象，较大的面积 |
image.png
2. react-konva
-
react-konva和react-canvas是github上星星比较多的react相关canvas第三方库。由于react-canvas从17年3月之后就没有更新了，且不支持react 16，因此不再考虑。这里主要介绍react-konva的使用。 -
React Konva是一个JavaScript库，用于使用React绘制复杂的画布图形。 - 基本概念
把整个视图看做一个舞台stage。而舞台中的每一层，看做layer。layer层中有许多group组。在group中绘制画图、图片等shape。
Stage
|
+------+------+
| |
Layer Layer
| |
+-----+-----+ Shape
| |
Group Group
| |
+ +---+---+
| | |
Shape Group Shape
|
+
|
Shape
import React, { Component } from "react";
import Konva from "konva";
import { render } from "react-dom";
import { Stage, Layer, Rect, Text } from "react-konva";
class ColoredRect extends React.Component {
state = {
color: "green"
};
handleClick = () => {
this.setState({
color: Konva.Util.getRandomColor()
});
};
render() {
return (
<Rect
x={20}
y={20}
width={50}
height={50}
fill={this.state.color}
shadowBlur={5}
onClick={this.handleClick}
/>
);
}
}
class App extends Component {
render() {
return (
<Stage width={window.innerWidth} height={window.innerHeight}>
<Layer>
<Text text="Try click on rect" />
<ColoredRect />
</Layer>
</Stage>
);
}
}
render(<App />, document.getElementById("root"));
