//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