1. Canvas
-
Canvas
是HTML5新增的組件弛作,它就像一塊幕布胁编,可以用JavaScript
在上面繪制各種圖表酷鸦、動(dòng)畫等。
只能夠js
腳本驅(qū)動(dòng)是Canvas
的特點(diǎn)滥比。
-
canvas
元素
<canvas id='mycanvas' width=400 height=400>
Your browser does not support the canvas element.
</canvas>
- 支持
canvas
的瀏覽器會(huì)只渲染canvas
標(biāo)簽亚脆,而忽略其中的替代內(nèi)容。不支持 canvas
的瀏覽器則會(huì)直接渲染替代內(nèi)容盲泛。
- 說明
canvas
內(nèi)部是不可以嵌套其他dom
結(jié)構(gòu)的濒持。
-
CanvasRenderingContext2D
對(duì)象
所有的繪圖操作都需要通過這個(gè)對(duì)象完成。
- 繪制折線路徑
//canvas元素
var c=document.getElementById('mycanvas');
//context對(duì)象
var ctx=c.getContext('2d');
ctx.beginPath();
//①定義樣式
ctx.strokeStyle='green'; //顏色
ctx.lineWidth=20; //線寬
ctx.lineCap='square'; //端點(diǎn)
ctx.lineJoin='round'; //拐點(diǎn)
//②定義路徑
ctx.moveTo(50,50); //起點(diǎn)
ctx.lineTo(100,100); //拐點(diǎn)
ctx.lineTo(50,200); //終點(diǎn)
ctx.closePath(); //閉合
//③繪制
ctx.stroke();
-
canvas
元素必須通過width
查乒、height
設(shè)置寬高禽车。重新設(shè)置width
或height
,畫布中任何已繪對(duì)象都將被清除蒋得。
- 每一個(gè)
canvas
元素僅有一個(gè)context
對(duì)象宁舰,擁有多種繪制路徑、矩形蓖议、圓形虏杰、字符以及添加圖像的方法和屬性。
- 定義樣式和定義路徑(位置尺寸)的相對(duì)位置可調(diào)整勒虾,但繪制必須在定義樣式和定義路徑(位置尺寸)之后纺阔,否則樣式和路徑無法生效。
- 若未定義樣式修然,則為默認(rèn)樣式笛钝;若未修改樣式质况,則為上次樣式。
- 繪制其它路徑
//矩形路徑
//位置(50,20)玻靡,尺寸(200,200)
ctx.rect(50,20,200,200);
//③繪制
ctx.stroke();
//原型路徑
//②定義位置尺寸
//中心點(diǎn)坐標(biāo)(100,70),半徑50,開始角180度结榄,結(jié)束角0度,逆時(shí)針囤捻。
ctx.arc(100,70,50,Math.PI,0,true);
//③繪制
ctx.stroke();
- 繪制笑臉
ctx.clearRect(0, 0, 200, 200); // 擦除(0,0)位置大小為200x200的矩形臼朗,擦除的意思是把該區(qū)域變?yōu)橥该?ctx.fillStyle = '#dddddd'; // 設(shè)置顏色
ctx.fillRect(10, 10, 130, 130); // 把(10,10)位置大小為130x130的矩形涂色
// 利用Path繪制復(fù)雜路徑:
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);
- 繪制圖片
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);
}
-
canvas
動(dòng)畫
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)
};
- SVG vs canvas:如何選擇
對(duì)比 |
Canvas |
SVG |
操作對(duì)象 |
基于像素 |
基于圖形元素 |
元素 |
單個(gè)HTML 元素 |
多種圖形元素(Rect ,Path ,Line ...) |
驅(qū)動(dòng) |
腳本驅(qū)動(dòng) |
支持腳本和CSS
|
交互粒度 |
用戶交互到像素點(diǎn)(x, y)
|
用戶交互到圖形元素 |
性能 |
適合較小面積,較多的對(duì)象 |
適合較少的對(duì)象蝎土,較大的面積 |
-
react-konva
和react-canvas
是github
上星星比較多的react
相關(guān)canvas
第三方庫(kù)视哑。由于react-canvas
從17
年3
月之后就沒有更新了,且不支持react 16
誊涯,因此不再考慮挡毅。這里主要介紹react-konva
的使用。
-
React Konva
是一個(gè)JavaScript
庫(kù)醋拧,用于使用React
繪制復(fù)雜的畫布圖形慷嗜。
- 基本概念
把整個(gè)視圖看做一個(gè)舞臺(tái)stage
。而舞臺(tái)中的每一層丹壕,看做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"));
參考
學(xué)習(xí)HTML5 Canvas這一篇文章就夠了
Konva入門教程