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