//show:

//code:

import React from "react"
import {findDOMNode} from 'react-dom'
import { Button, Row, Col} from 'antd'
class CanvasTest1 extends React.Component {
componentDidMount() {
const divDom = findDOMNode(this)
const ctxCanvas1 = divDom.querySelector('.canvas1')
const ctx1 = ctxCanvas1.getContext('2d')
ctx1.font = "bold 12px serif";
ctx1.fillStyle = "Black";
ctx1.fillText("easy cancas shape: ", 0, 14);
 
const mpointColor = ["#FF0C00", "#EF8B00", "#64FF00"];
for(var i=0; i<mpointColor.length;i++){
drawCircle(100 * i + 180, 8, 6, mpointColor[i]);
}
 
drawStrokeRect(412, 2, 12, 12, "#000000")
drawStrokeCircle(512, 8, 6, "#000000")
drawStrokeTriUp(612, 2, 12, 12, "#000000")
 
 
 
function drawStrokeRect(x,y,w,h,color) {
const ctxCanvas1 = divDom.querySelector('.canvas1')
if (ctxCanvas1.getContext) {
const ctx1 = ctxCanvas1.getContext('2d');
ctx1.beginPath();
ctx1.strokeStyle=color;
ctx1.strokeRect(x,y,w,h);
ctx1.stroke();
}
}
 
function drawStrokeCircle(x,y,r,color) {
const ctxCanvas1 = divDom.querySelector('.canvas1')
if (ctxCanvas1.getContext){
const ctx1 = ctxCanvas1.getContext('2d');
// tempCtx.scale(2,2);
ctx1.beginPath();
ctx1.strokeStyle=color;
ctx1.arc(x, y, r, 0, Math.PI*2, true);
ctx1.stroke();
}
}
 
function drawStrokeTriUp(x,y,w,h,color) {
const ctxCanvas1 = divDom.querySelector('.canvas1')
if (ctxCanvas1.getContext){
const ctx1 = ctxCanvas1.getContext('2d');
ctx1.beginPath()
ctx1.strokeStyle=color
ctx1.moveTo(x, y + h)
ctx1.lineTo(x + w, y + h)
ctx1.lineTo(x + w/2, y)
ctx1.lineTo(x, y + h)
ctx1.stroke()
}
}
function drawCircle(x,y,r,color) {
const ctxCanvas1 = divDom.querySelector('.canvas1')
if (ctxCanvas1.getContext){
const ctx1 = ctxCanvas1.getContext('2d');
ctx1.beginPath();
ctx1.fillStyle=color;
ctx1.arc(x, y, r, 0, Math.PI*2, true);
ctx1.fill();
}
}
 
}
render() {
const style1 = {
position: 'absolute',
width: 1308,
height: 30,
index: 0,
border: '1px solid black',
}
 
return (
<div className="gutter-example button-demo">
<Row>
<Col>
<div className="gutter-box">
<div style={{width: 1308, height: 30}}>
<canvas className="canvas1" width="1308" height="30" style={style1} />
</div>
</div>
</Col>
</Row>
</div>
)
}
}
export default CanvasTest1

easy canvas shape with react antdesign 简单的canvas图形in antd & react的更多相关文章

  1. react构建淘票票webapp,及react与vue的简单比较。

    前言 前段时间使用vue2.0构建了淘票票页面,并写了一篇相关文章vue2.0构建淘票票webapp,得到了很多童鞋的支持,因此这些天又使用react重构了下这个项目,目的无他,只为了学习和共同进步! ...

  2. React 最简单的入门教程

      一看就懂的ReactJs入门教程(精华版)   现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual D ...

  3. 炒鸡简单的canvas粒子(山东数漫江湖)

    位图的canvas一直不会被svg比下去的原因了. 俗话说,须弥芥子,是大小之说,也有以小见大之说,颗颗粒子,足以构建宏大效果. 这是一篇炒鸡简单的canvas粒子教程,主要是讲如何粒子特效的原理,一 ...

  4. React Hooks简单业务场景实战(非源码解读)

    前言 React Hooks 是React 16.7.0-alpha 版本推出的新特性.从 16.8.0 开始,React更稳定的支持了这一新特性. 它可以让你在不编写 class 的情况下使用 st ...

  5. React组件简单介绍

    组件是 React 的核心,因此了解如何利用它们对于创建优秀的设计结构至关重要. 组件之间传递信息方式: 1.(父组件)向(子组件)传递信息 2.(子组件)向(父组件)传递信息 3.没有任何嵌套关系的 ...

  6. antd+react项目迁移vite的解决方案

    antd+react+webpack往往是以react技术栈为主的前端项目的标准组合,三者都有成熟的生态和稳定的表现,但随着前端圈的技术不断革新,号称下一代构建平台vite2的发布,webpack似乎 ...

  7. Mock平台3-初识Antd React 开箱即用中台前端框架

    微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 内容提要 首先说下为啥这次测试开发系列教程前端选择Antd React,其实也是纠结对比过最终决定挑战一把,想法大概有几下几点: 笔者自己 ...

  8. 《FLASH CC 2015 CANVAS 中文教程》——1、导出canvas动画,文件结构浅析

    注::如果你对 FLASH 这个软件操作不够熟悉,建议你可以先看看FLASH动画之类的书. :FLASH CC 在文中直接简称为CC. :以下所以文章中所说的快捷键 如果你按了不起作用,请检查是否有其 ...

  9. Wait… What Happens When my React Native Application Starts? — An In-depth Look Inside React Native

    Discover how React Native functions internally, and what it does for you without you knowing it. Dis ...

随机推荐

  1. Linux磁盘分区、挂在

    分区基础知识分区的方式:1) mbr分区:1.最多支持四个主分区2.系统只能安装在主分区3.扩展分区要占一个主分区4.MBR最大只支持2TB,但拥有最好的兼容性2) gtp分区:1.支持无限多个主分区 ...

  2. mysql工具——perror(mysql错误代码,查看错误号释义)

    mysql工具——perror(mysql查看错误代码,查看错误号释义) 关键词:mysql错误代码,mysql错误号,perror

  3. 语言模型预训练方法(ELMo、GPT和BERT)——自然语言处理(NLP)

    1. 引言 在介绍论文之前,我将先简单介绍一些相关背景知识.首先是语言模型(Language Model),语言模型简单来说就是一串词序列的概率分布.具体来说,语言模型的作用是为一个长度为m的文本确定 ...

  4. 博客主题皮肤探索-主题的本地化和ChromeCacheView使用

    还有前言 用了大佬的主题之后,有些资源是无法在暴露的接口处更改的,需要自己去css更改.但后台给的都是压缩过的,找起来比较困难,所以特意记录了这篇. 本地资源替换 侧边栏: .introduce-bo ...

  5. 03-树3 Tree Traversals Again (25 分)

    An inorder binary tree traversal can be implemented in a non-recursive way with a stack. For example ...

  6. 手机端全局样式表整理(mobile)

    @charset "utf-8";/*  * filename:          global.css * description:       全局样式(包含样式重置,公共常用 ...

  7. 第2章—装配Bean—通过XML装配Bean

    通过XML装配Bean ​ 尽管我们在生成Bean的过程中可以用到很多方法,但我们依然需要Spring的XML配置来完善更多的需求,下面就来介绍下XML装配Bean的过程是怎样的. 3.1创建XML配 ...

  8. 11.Set 和 Map数据结构

    1.set 基本用法 ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. const s = new S ...

  9. Oracle 12c 创建用户

    本文转载自 http://blog.itpub.net/29047826/viewspace-1453577/,侵删.   12c推出了可插拔库,管理用户也分为两种:本地用户和公用用户.本地用户是指在 ...

  10. maven子模块转化成project

    把maven多模块中的子模块单独形成一个eclipse的project,需要使用导入 选中子模块,右键选择Import... 在选择弹出框中选择Maven--Existing Maven Projec ...