由于自己的项目需求，需要把射击打靶的环数、打靶位置记录下来，就研究了下在HTML上画图的例子；
这里就不说什么了，直接代码撸起：
html代码： <style type="text/css"> .myCanvas{ border-radius: 100%; } </style> <canvas id="myCanvas" class='myCanvas' width="600" height="600" onclick="draw_point(event)"></canvas> js代码： $(function () { //存放成绩环数 list = new Array(); //圆心点的X轴坐标 xx = 300; //圆心点的Y轴坐标 yy = 300; //圆半径的长度（最内的那个圆的半径：是半径！） rr = 20; //Canvas画布对象 c = document.getElementById("myCanvas"); //画笔 context = c.getContext("2d"); //画靶子 drowToues(xx,yy,rr,20,10,"red"); }); /** * * 计算最终的环数成绩 * */ function getValue (event){ /* //绝对坐标位置 var data1 = mouseCoords(event); var x1 = data1.x; var y1 = data1.y; console.log("绝对坐标："+x1+","+y1); */ //相对坐标位置 var data2 = getXAndY(event); var x2 = data2.x; var y2 = data2.y; console.log("相对坐标："+(x2+2)+","+(y2+2)); var dx=xx-(x2+2); var dy=yy-(y2+2); var dist=Math.sqrt(dx*dx+dy*dy); var v = parseInt(dist/rr); console.log("这两点之间相隔:"+v+" 圈 "); alert("所选的是:"+ (10 - v) +" 环 "); } /** * 点击画板：画点 * @param e */ function draw_point(event) { //设置绘制颜色 context.fillStyle="red"; //标记点的位置：x y 长 宽 context.fillRect(event.offsetX,event.offsetY,4,4); console.log(list); getValue(event); } /** * 清除画点 * @param context 画笔 * @param x 要清除的矩形左上角的 x 坐标 * @param y 要清除的矩形左上角的 y 坐标 * @param width 要清除的矩形的宽度，以像素计 * @param height 要清除的矩形的高度，以像素计 */ function clearValue(context,xx,yy,width,height) { context.clearRect(xx,yy,width,height); } /** * 保存图片： * @param event 对象 */ function saveImage(canvas) { //调用Canvas2Image插件 需要导入包：canvas2image.js // Canvas2Image.saveAsImage(canvas, 240, 240, "jpg", "图片名称"); //strDataURI 打印为base64 var strDataURI = canvas.toDataURL("image/jpeg"); console.log(strDataURI); } /** * 获取鼠标点击区域中的相对位置坐标 * @param event 对象 */ function getXAndY(event){ //鼠标点击的绝对位置 Ev= event || window.event; var mousePos = mouseCoords(event); var x = mousePos.x; var y = mousePos.y; //alert("鼠标点击的绝对位置坐标："+x+","+y); //获取div在body中的绝对位置 var x1 = $("#myCanvas").offset().left; var y1 = $("#myCanvas").offset().top; //alert("div在body中的绝对位置坐标："+x1+","+y1); //鼠标点击位置相对于div的坐标 var x2 = x - x1; var y2 = y - y1; return {x:x2,y:y2}; } /** * 获取鼠标点击区域在Html绝对位置坐标 * @param event 对象 */ function mouseCoords(event){ if(event.pageX || event.pageY){ return {x:event.pageX, y:event.pageY}; } return{ x:event.clientX + document.body.scrollLeft - document.body.clientLeft, y:event.clientY + document.body.scrollTop - document.body.clientTop }; } /** * 画同心圆：靶子 * 先画的是最内圈 * @param center_x 圆心点的X轴坐标 * @param center_y 圆心点的Y轴坐标 * @param radius 圆半径的长度（最内的那个圆的半径：是半径！） * @param ply 相邻的两个圆的间隔距离 * @param nub 同心圆的数量:从外向内数 * @param colorStyle 笔触的颜色 例如：red 红色 */ function drowToues(center_x,center_y,radius,ply,nub,colorStyle){ context.strokeStyle=colorStyle; for (var i = 1 ;i < nub ;i++){ if(i == 1){ context.moveTo(center_x + radius,center_y); context.arc(center_x,center_y,radius,0,Math.PI * 2,true); } radius = radius + ply; context.moveTo(center_x + radius,center_y); context.arc(center_x,center_y,radius,0,Math.PI * 2,true); context.stroke(); } } 完成 这样就能画出同心圆的靶子。canvas2image.js 链接：https://pan.baidu.com/s/1HOsiiRhkCUrj-nzCOX_akg 提取码：gwgm 复制这段内容后打开百度网盘手机App，操作更方便哦
在开发的过程中，遇到不同的问题都可以留言讨论，一起学习。
