Recently on canvas bar, write a summary.

Requirements: 1. Draw a circle: simply click to draw a circle of fixed size, press a and slide the mouse to release b to draw a circle with unfixed radius (the radius is determined according to the distance between A and B, and A is the center of the circle).

Canvas properties

Attr is used to set width, height, and style/ CSS is not recommended. The height tag can be inserted in the middle of the content displayed when the browser does not support Canvas. Can not write

<canvas id="can" width="800px" height="1000px" ></<canvas>

To operate on a canvas, you need to get the context of the canvas using getContext.

A circle

Define the structure of the circle

{
    x:1.// X coordinates
    y:1.// Y coordinates
    r:20./ / radius
    fontPos: { // The coordinates of the subscript
        x: 1.y:2}}Copy the code

By listening for mouse events to determine whether it is a click, the complete code is as follows

<! DOCTYPE HTML >< HTML >< head> <meta charset=" utF-8 "> <script type="text/javascript" SRC ="./jquery-1.9.0.min.js" ></script>  </head> <body> <div id="box" style="width: 500px; height: 500px; margin: 0 auto;" > <canvas id="can" width="800px" height="1000px" style="border: 1px solid black;" > < canvas > < / div > < div > < input id = "num" / > < button id = "BTN" &western nclick = "del ()" > delete < / button > < / div > < / body > < script type="text/javascript" > var canvas_w = 800; var canvas_h = 1000; var list = []; var index = 1; var can = document.getElementById('can'); var ctx = can.getContext("2d"); Var radius = 40; function mouseCoords(ev){ var e = event || window.event; var x = e.offsetX || e.layerX; var y = e.offsetY || e.layerY; return {x,y}; Function makeArc (x,y,r,color){ctx.beginPath(); ctx.lineWidth = "2" ctx.strokeStyle='red'; CTX. Arc (x, y, r, 0180); // Center position: x,y; Radius of circle: r; Starting Angle: S; End Angle: e; ctx.stroke(); } function getFontPos(x, y, r) { return {x: x + r, y: y + r} } function drawFont(x, y, num, color) { ctx.font = "16px serif"; ctx.fillStyle = color; ctx.fillText(num, x, y); } function isPointInRetc(x,y){ let len=layers.length; for(let i=0; i<len; i++){ if(layers[i].x1<x&&x<layers[i].x2&&layers[i].y1<y&&y<layers[i].y2){ return layers[i]; } } } $('#btn').click(function(){ del(); }) function del() { var num = document.getElementById('num').value; if(! +num) { return; } var index = list.findIndex(val=> val.idx === +num); if(index === -1) { return; } list.splice(index, 1); reDraw(); } function reDraw () { ctx.clearRect( 0, 0, 800, 1000 ); // Clear the canvas list.foreach ((item)=>{makearc(item.x,item.y, item.radius,'red'); drawFont(item.fontPos.x, item.fontPos.y, item.idx, 'red') }) } var isMove = false; can.onmousedown = function(oEvent) { origin = mouseCoords(oEvent); isClick = true; isMove = false; }; var movePoint = {x: 0, y : 0, r: 0}, isClick = false, origin; offset = getOffset(can); function getOffset(obj) { var x = 0, y = 0; do { x += obj.offsetLeft; y += obj.offsetTop; obj = obj.offsetParent; } while (obj); return Point(x, y); } function Point(x, y) { return {x: x || 0, y: y|| 0} } document.onmousemove = function(oEvent) { if (! isClick) { return; } oEvent = oEvent || event; pt = Point(oEvent.clientX - offset.x, oEvent.clientY - offset.y); r = Math.sqrt( (pt.x - origin.x) * (pt.x - origin.x) + (pt.y - origin.y) * (pt.y - origin.y) ); if (! PosIslegal ({x: origine.x, y: origine.y,}, r)) {console.log(' out of bounds '); return; } movePoint = { x: origin.x, y: origin.y, r } reDraw(); makearc(origin.x, origin.y, r, "green"); isMove = true; }; document.onmouseup = function(oEvent) { isClick = false; var mousePos = mouseCoords(oEvent); if (mousePos.x === origin.x && mousePos.y === origin.y && ! isMove) { handleClick(mousePos) return; } if(movePoint && isMove) { var fontPos = getFontPos(movePoint.x, movePoint.y, movePoint.r); var idx = index ++; list.push({ x: movePoint.x, y: movePoint.y, radius: movePoint.r, idx, fontPos }) reDraw(); isMove = false; }}; function handleClick (mousePos) { if(! PosIslegal (mousePos, radius)) {console.log(' The position of the circle is out of bounds! '); return; } mousePosX = mousePos.x; mousePosY = mousePos.y; var fontPos = getFontPos(mousePosX, mousePosY, radius); var idx = index ++; list.push({ x: mousePosX, y: mousePosY, radius, idx, fontPos }) makearc(mousePosX,mousePosY, radius,'red'); drawFont(fontPos.x, fontPos.y, idx, 'red') } function posIslegal(pos, r) { const x = pos.x + r; const y = pos.y + r; const left_x = pos.x - r; const left_y = pos.y - r; console.log('-----', left_x, left_y); // || left_x < canvas_w || left_y < canvas_h if(x > canvas_w || y > canvas_h || left_x < 0 || left_y < 0 ) { return false; } return true; } </script> </html>Copy the code

reading

The time for drawing each circle is set to 1s. SetInterval can be used to control the strategy of drawing arcs. Record the subscript of the current circle and the length/percentage of the current arc;

Complete code:

<! DOCTYPE HTML >< HTML >< head> <meta charset=" utF-8 "> <script type="text/javascript" SRC ="./jquery-1.9.0.min.js" ></script>  </head> <style> #yuan { border: 1px solid; } .show { display: inline-block; } .hide { display: none; } .zebra { width: 700px; height: 700px; border: 1px solid red; position: relative; } </style> <body> <p>input:<input onclick="circleProgress()" value=" circle "type="button"></p> <div> <canvas ID ="yuan" width="500" height="800"></canvas> </div> </body> <script type="text/javascript" > var timer=null, n = 0; var canvas = document.getElementById("yuan"); var context = canvas.getContext('2d'); Var this = $(canvas), maxpercent = 100, c_width = _this.width(), canvas, width c_height =_this.height(); / / canvas, highly list = [{x: 100, y: 50, r: 20,}, {x: 76, y: 177 r: 20,}, {x: 400, y: 280 r: 30,}, {x: 200, y: 397, r: 40, },{ x: 388, y: 140, r: 23, }, { x: 426, y: 547, r: 45, }, ] function circleProgress(){ if(timer) { clearInterval(timer); } n = 0; index = 0; loadCanvas(0); // call timer to implement dynamic effect}; var index = 0, len = list.length; function loadCanvas(nowT){ timer = setInterval(function(){ console.log('----', n, index); if(index === (len - 1) && n > 100) { clearInterval(timer); return; } if(n > 100){ // clearInterval(timer); // return; index++; n = 0; } draw(n / 100); n += 1; }, 10); // 1000 秒} function draw(cur){context.strokeStyle = "#27b5ff"; The context. Our lineWidth = 2.0; context.clearRect(0, 0, c_width, c_height); for(let i = 0; i < index; i++) { context.beginPath(); const c = list[i]; context.arc(c.x, c.y, c.r, 0, 180, false); context.stroke() } context.beginPath(); const curC = list[index]; // Draw a center point of (c_width/2, c_height/2) with a radius of c_height/2-5 that does not overlap the outer circle, // Start point -(math.pi /2), Arc (curC. X, curC. Y, curC. R, -(math.pi /2), ((Math.PI * 2) * cur ) - Math.PI / 2, false); context.stroke(); } </script> </html>Copy the code

Click “Draw circle” to draw circles in sequence on the canvas.