39,083
社区成员
发帖
与我相关
我的任务
分享canvas 跟随鼠标画圆
有个需求 需要在图片上画一个标注，用了canvas之后基本实现了。但是在标注的时候需要用圆来做记号，然后是试了一下怎么都不行。
各位有没有能帮忙看看的，想要那种鼠标点击，跟着鼠标拖动变形的圆。不要那种点击直接出现的圆。
或者能不能用别的方法实现。
各位有没有能帮忙看看的，想要那种鼠标点击，跟着鼠标拖动变形的圆。不要那种点击直接出现的圆。
或者能不能用别的方法实现。
<canvas id="myCanvas"></canvas>
<div class="btn">
<button class="btnone" onClick="clean();">清 空</button>
<button class="btnone" onClick="save();">生成图片</button>
</div>
<script type="text/javascript">
var imgw = document.getElementById('imgW').value;
var imgh = document.getElementById('imgH').value;
var canvas,board,img;
canvas = document.getElementById('myCanvas');
img= document.getElementById('img');
canvas.height = imgh;
canvas.width = imgw;
canvas.style.backgroundImage="url('timg.png')";
board = canvas.getContext('2d');
img.src = "timg.png";
img.onload = function() {
board.drawImage(img, 0, 0);
}
var mousePress = false;
var last = null;
function beginDraw(){
mousePress = true;
}
function drawing(event){
event.preventDefault();
if(!mousePress)return;
var xy = pos(event);
if(last!=null){
/*board.beginPath();
board.moveTo(last.x,last.y);
board.lineTo(xy.x,xy.y);
board.stroke();*/
//画圆
board.beginPath();
board.arc(xy.x,xy.y,5,0,Math.PI*2,true);
board.strokeStyle="red";
board.closePath();
board.stroke();
}
last = xy;
}
function endDraw(event){
mousePress = false;
event.preventDefault();
last = null;
}
function pos(event){
var x,y;
if(isTouch(event)){
x = event.touches[0].pageX;
y = event.touches[0].pageY;
}else{
x = event.offsetX+event.target.offsetLeft;
y = event.offsetY+event.target.offsetTop;
}
return {x:x,y:y};
}
function log(msg){
var log = document.getElementById('log');
var val = log.value;
log.value = msg+'n'+val;
}
function isTouch(event){
var type = event.type;
if(type.indexOf('touch')>=0){
return true;
}else{
return false;
}
}
function save(){
var dataUrl = canvas.toDataURL();
dataUrl = dataUrl.replace("image/png","image/octet-stream");
document.getElementById('imgS').value = dataUrl;
document.getElementById('imgdiv').style.display= "";
img.src = dataUrl;
}
function clean(){
board.clearRect(0,0,canvas.width,canvas.height);
img.src = "timg.png";
img.onload = function() {
board.drawImage(img, 0, 0);
}
}
board.lineWidth = 1;
board.strokeStyle="#0000ff";
canvas.onmousedown = beginDraw;
canvas.onmousemove = drawing;
canvas.onmouseup = endDraw;
canvas.addEventListener('touchstart',beginDraw,false);
canvas.addEventListener('touchmove',drawing,false);
canvas.addEventListener('touchend',endDraw,false);
</script>
...全文
请发表友善的回复…
发表回复
业余草 2017-07-04
- 打赏
- 举报
<title>鼠标跟随画</title>
<style type="text/css">
*{padding:0px; margin:0px;}html{height:100%;}
body{height:100%;}
#shoot{width:100%; height:100%; background:#FFC; text-align:center; line-height:60px;}
</style>
<script type="text/javascript">
window.addEventListener("mousemove",cs,false);
var x,y;
// window.setInterval( "show()",500);
function show(){
var z=Math.random()*50;
var M=Math.random();
var canvas=document.getElementById("show");
var context=canvas.getContext('2d');
context.clearRect(0,0,canvas.width,canvas.height);
//context.save();
context.beginPath();
context.arc(x,y,z,0,Math.PI*2,true);
context.closePath();
context.strokeStyle="rgba(143,9,9,"+M+")";
context.lineWidth=3;
context.stroke();
//context.restore();
}
function cs(event){
var e=event||window.event;
x=e.pageX;
y=e.pageY;
show();
}
</script>
</head>
<body>
<canvas id="show" width="800px" height="600px">抱歉！您的浏览器不支持html5的canvasAPI，请更换浏览器查看！
</canvas>
</body></html> 
