//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. python 类中的某个函数作为装饰器

    在python的类中,制作一个装饰器的函数, class A: def wrapper(func): ###装饰器 def wrapped(self,*arg,**kwargs) ... return ...

  2. C 语言调试信息输出宏定义

    C 语言经常在实际的调试过程中,使用最基本的调试方法printf,我们可以使用__FILENAME__.__FUNCTION__.__LINE__,增加自己的输出宏定义: #define DVR_PR ...

  3. redis-server.exe双击闪退 win10系统

    博客 解决方法: 1-win+R 打开命令行 2-cd至redis目录,例如 D:\redis> 3-输入 redis-server.exe redis.windows.conf     4-若 ...

  4. github访问慢加速访问

    实测从1kb到了1m多 方法: 登录 https://www.ipaddress.com/ 输入github.com得到一个或两个IP地址 输入github.global.ssl.fastly.net ...

  5. java防范跨站脚本攻击(XSS)

    网络中心提示网站有数目众多的跨站脚本攻击(XSS)漏洞,经过查看代码,认为是JSP中绑定变量是未经处理直接写入的,而且整个项目中这样的做法太多,因为是多年前的,不好一个个更改,参照网上资料,通过加fi ...

  6. html5: 复制到剪贴板 clipboard.js

    1.使用clipboard.min.js工具,引用此js 注意事项: IOS微信网页开发中,若使用此工具来开发复制功能,则需要在超链接/按钮上新增 onclick=" " 2.cl ...

  7. 查看APK包签名的方法。

    1.查看 keystore $ keytool -list -keystore debug.keystore 结果: Keystore type: JKS Keystore provider: SUN ...

  8. wusir FTP与HTTP文件传输之TCP Packet解析

    向服务器传输文件(上传或下载)时,FTP与HTTP是两种最常用的应用层协议,这两个协议都是基于TCP协议之上.如果深入到数据包内(Packet)进行查看时,FTP与HTTP进行文件传输时有什么特征代码 ...

  9. rabbitmq无用使用guest用户远程连接

    最近开始使用rabbitmq,因为不了解,浪费了不少时间,记录如下: 使用场景:服务器(linux)上部署了一个app1模块,该模块向rabbitmq发送消息,我想让这个模块的消息发送到我本地(win ...

  10. 更换bbr内核

    1:首先yum update -y更新到最新CentOS 7.3 1611cat /etc/redhat-releaseCentOS Linux release 7.3.1611 (Core) 2: ...