Solved

HTML - How to draw a 'target'  / concentric circles on a canvas

Posted on 2014-07-20
2
489 Views
Last Modified: 2014-07-20
How can use  JS  to draw a 'target'  (Like the Target icon ) or concentric circles when a  canvas is click on a an specific point?

 var ctx = canvas.getContext('2d');
????
0
Comment
Question by:JElster
2 Comments
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
ID: 40207638
maybe something like this? http://jsfiddle.net/robert_schutt/8usRk/
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

var C_RADIUS = 20, C_NUM = 3, C_WIDTH = 10;

$('#canvas').click(function(e){
    var offset = $(this).offset();
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    var x = e.pageX - offset.left - C_WIDTH / 2;
    var y = e.pageY - offset.top - C_WIDTH / 2;
    ctx.lineWidth = C_WIDTH;
    ctx.strokeStyle = 'black';
    ctx.beginPath();
    ctx.moveTo(x - C_NUM * C_RADIUS, y);
    ctx.lineTo(x + C_NUM * C_RADIUS, y);
    ctx.closePath();
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(x, y - C_NUM * C_RADIUS);
    ctx.lineTo(x, y + C_NUM * C_RADIUS);
    ctx.closePath();
    ctx.stroke();
    ctx.strokeStyle = 'red';
    for (var c = 0; c <= C_NUM; c++) {
        ctx.beginPath();
        ctx.arc(x, y, C_WIDTH / 2 + c * C_RADIUS, 0, 2 * Math.PI, true);
        ctx.closePath();
        ctx.stroke();
    }
});

Open in new window

0
 
LVL 1

Author Comment

by:JElster
ID: 40207923
thx again!
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Deprecated and Headed for the Dustbin By now, you have probably heard that some PHP features, while convenient, can also cause PHP security problems.  This article discusses one of those, called register_globals.  It is a thing you do not want.  …
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now