我试图用鼠标画在HTML5画布上,但它似乎运行良好的唯一方法是如果画布位于0,0(左上角),如果我改变画布位置,由于某种原因它不会像它应该画的那样.这是我的代码.
function createImageOnCanvas(imageId){
document.getElementById("imgCanvas").style.display = "block";
document.getElementById("images").style.overflowY= "hidden";
var canvas = document.getElementById("imgCanvas");
var context = canvas.getContext("2d");
var img = new Image(300,300);
img.src = document.getElementById(imageId).src;
context.drawImage(img, (0),(0));
}
function draw(e){
var canvas = document.getElementById("imgCanvas");
var context = canvas.getContext("2d");
posx = e.clientX;
posy = e.clientY;
context.fillStyle = "#000000";
context.fillRect (posx, posy, 4, 4);
}
HTML部分
<body>
<div id="images">
</div>
<canvas onmousemove="draw(event)" style="margin:0;padding:0;" id="imgCanvas"
class="canvasView" width="250" height="250"></canvas>
我已经读过有一种方法可以在JavaScript中创建一个简单的函数来获得正确的位置,但我不知道如何做到这一点.
如何在画布元素上自由绘制(使用我的鼠标/手指),就像你可以用铅笔画画一样？
有很多问题需要在画布上实现免费手绘:
所以我认为提出一个参考问题是一个好主意,每个答案都是社区维基,并且包含对一个JavaScript库/纯JavaScript如何在画布上绘画的解释.
答案应该是社区维基并使用以下模板:
## [Name of library](Link to project page)
### Simple example
A basic, complete example. That means it has to contain HTML
and JavaScript. You can start with this:
<!DOCTYPE html>
<html>
<head>
<title>Simple example</title>
<script type='text/javascript' src='http://cdnjs.com/[your library]'></script>
<style type='text/css'>
#sheet {
border:1px solid black;
}
</style>
<script type='text/javascript'>
window.onload=function(){
// TODO: Adjust
}
</script>
</head>
<body>
<canvas id="sheet" width="400" height="400"></canvas>
</body>
</html> …是否可以在JavaScript(客户端)上按像素级别动态创建和修改图像？或者这是基于服务器的语言,如PHP吗？
我的用例如下:
在网上搜索时,我刚发现有关使用IE过滤方法的帖子,但没有找到任何有关JavaScript中图像编辑功能的信息.
我试图使用鼠标事件在画布上使用鼠标绘制一个圆圈,但它不绘制任何东西:
tools.circle = function () {
var tool = this;
this.started = false;
this.mousedown = function (ev) {
tool.started = true;
tool.x0 = ev._x;
tool.y0 = ev._y;
ctx.moveTo(tool.x0,tool.y0);
};
this.mousemove = function (ev) {
var centerX = Math.max(tool.x0,ev._x) - Math.abs(tool.x0 - ev._x)/2;
var centerY = Math.max(tool.y0,ev._y) - Math.abs(tool.y0 - ev._y)/2;
var distance = Math.sqrt(Math.pow(tool.x0 - ev._x,2) + Math.pow(tool.y0 - ev._y));
context.circle(tool.x0, tool.y0, distance/2,0,Math.PI*2 ,true);
context.stroke();
};
};
我究竟做错了什么？
是否有一个javascript库,可以让我在网页上绘制,然后保存该绘图的状态？
我想使用鼠标绘制2D图像,然后如何存储和加载该绘图
有一个简单的绘图应用程序 问题出在坐标(redraw函数)中:它们必须是鼠标,但接近2x鼠标.代码中的问题是什么？
<html>
<head>
<style type="text/css" media="screen">
body{
background-color: green;
}
#workspace{
width: 700px;
height:420px;
margin: 40px auto 20px auto;
border: black dashed 1px;
}
#canvas{
background: white;
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
var context = document.getElementById('canvas').getContext("2d");
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
$('#canvas').mousedown(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = …我正在尝试使用鼠标事件在画布上画一条直线。我是java脚本的新手。有人可以帮助我或从我可以获得帮助的地方推荐一些东西吗？
javascript ×7
canvas ×4
drawing ×2
html5 ×2
html5-canvas ×2
draw ×1
geometry ×1
image ×1
jquery ×1
mouse ×1
mouseevent ×1