react中怎么使用canvas?

Canvas

  1. Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表、动画等。
    只能够js脚本驱动是Canvas的特点。
  2. canvas元素
<canvas id='mycanvas' width=400 height=400>
    Your browser does not support the canvas element.
</canvas>
  • 支持canvas的浏览器会只渲染canvas标签,而忽略其中的替代内容。不支持 canvas的浏览器则会直接渲染替代内容。
  • 说明canvas内部是不可以嵌套其他dom结构的。
  1. CanvasRenderingContext2D对象
    所有的绘图操作都需要通过这个对象完成。

    1.webp.jpg

  2. 绘制折线路径
//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();

2.webp.jpg

  • canvas元素必须通过widthheight设置宽高。重新设置widthheight,画布中任何已绘对象都将被清除。
  • 每一个canvas元素仅有一个context对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法和属性。
  • 定义样式和定义路径(位置尺寸)的相对位置可调整,但绘制必须在定义样式和定义路径(位置尺寸)之后,否则样式和路径无法生效。
  • 若未定义样式,则为默认样式;若未修改样式,则为上次样式。
  1. 绘制其它路径
//矩形路径
//位置(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();
  1. 绘制笑脸
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);

3.webp.jpg

  1. 绘制图片
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);
}

4.webp.jpg

  1. 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)
};
  1. SVG vs canvas:如何选择
对比CanvasSVG
操作对象基于像素基于图形元素
元素单个HTML元素多种图形元素(Rect,Path,Line...)
驱动脚本驱动支持脚本和CSS
交互粒度用户交互到像素点(x, y)用户交互到图形元素
性能适合较小面积,较多的对象适合较少的对象,较大的面积

5.webp.jpg

react-konva

  1. react-konvareact-canvasgithub上星星比较多的react相关canvas第三方库。由于react-canvas173月之后就没有更新了,且不支持react 16,因此不再考虑。这里主要介绍react-konva的使用。
  2. React Konva是一个JavaScript库,用于使用React绘制复杂的画布图形。可以让我们像操作 DOM 一样来操作 canvas,并提供了对 canvas 中元素的事件机制,拖放操作的支持。
  3. 基本概念
    把整个视图看做一个舞台stage。而舞台中的每一层,看做layerlayer层中有许多group组。在group中绘制画图、图片等shape
               Stage
                |
         +------+------+
         |             |
       Layer         Layer
         |             |
   +-----+-----+     Shape
   |           |
 Group       Group
   |           |
   +       +---+---+
   |       |       |
Shape   Group    Shape
           |
           +
           |
         Shape
  1. 示例
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"));

示例地址:https://codesandbox.io/s/5m3nwp787x?file=/index.js

Konva入门教程推荐:https://www.cnblogs.com/imgss/p/10557824.html

相关推荐:react教程

以上就是react中怎么使用canvas?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏