//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. leetcode-54-螺旋矩阵

    题目描述: 给定一个包含 m x n 个元素的矩阵(m 行, n 列),请按照顺时针螺旋顺序,返回矩阵中的所有元素. 示例 1: 输入: [ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7 ...

  2. iOS开发中断言的使用—NSAssert()

    原文链接:http://blog.csdn.net/univcore/article/details/16859263 断言(assertion)是指在开发期间使用的.让程序在运行时进行自检的代码(通 ...

  3. 39.oracle高级篇

    标题说是高级篇,其实也就是相对于基础篇来说的,也不是很深奥,自己平时工作中也都会用到,这里回忆的并不是特别冷门的知识,不要掉以轻心,以为“高级”就觉得工作中不会用到了. 一.select into 和 ...

  4. CentOS 7 安装过程中设置网络

    如果在安装过程中需要使用网络,需要启动网卡,默认是DHCP 点击configure进入设置 General 常规设置 Automatically connect to this network whe ...

  5. FJOI2019 游记[大概是考完会解封?]

    Day -1 不知不觉就快省选了啊...从NOIP的爆炸到现在也已经过了两个月了啊... 因为高一没有封闭[划] 所以这些内容是翘了课[划]在机房写的 嘛...感觉自己还有好多东西不会啊……这两天一直 ...

  6. FJWC2019 直径

    题目描述 你需要构造一棵至少有两个顶点的树,树上的每条边有一个非负整数边权.树上两点 i,j 的距离dis(i,j) 定义为树上连接i 和j 这两点的简单路径上的边权和. 我们定义这棵树的直径为,所有 ...

  7. HLS:跑马灯实验

    跑马灯实验的第一部分记录: 1. vivado 2018.2的HLS在跑C/RTL co-simulation的时候,一直报错,不论是用modelsim 还是vivado自带的similator.使用 ...

  8. Python爬虫之XML

    一.请求参数形式为xml 举例说明. 现在有这样一个网址:https://www.runff.com/html/live/s1484.html:想要查询图片列表,打开F12,观察到请求如下: 这里的请 ...

  9. 16个最佳响应式HTML5框架分享

    HTML5框架可以快速构建响应式网站,它们帮助程序员减少编码工作,减少冗余的代码.如今有很多免费的HTML5框架可供使用,由于它们有着响应式设计.跨浏览器兼容.相对轻量级等特点,这些框架在开发中都十分 ...

  10. 使用Thumbnailator处理gif图片时遇到java.lang.ArrayIndexOutOfBoundsException: 4096异常处理

    环境 1.7.0_80 在使用Thumbnailator处理gif图片时,遇到问题: Exception in thread "main" java.lang.ArrayIndex ...