在画布上没有正确地画线。
在画布上没有正确地画线。
提问于 2013-06-09 09:30:01
我是HTML5的新手，但对HTML有很好的经验。当时我正在学习画布，想要制作一个程序。在这个过程中，我处理用户的mousedown和mouseup，并根据鼠标的坐标设置变量的值。然后，在那些人的帮助下，我抚摸着画布上的线，这条线画得不好。
我为实现这一点所做的工作：
<script type="text/javascript" src="jquery.min.js"></script>
<script src="bhaiya.js"></script>
<canvas id="myCanvas" style="height: 100%; width: 100%;">
</canvas>JS
$(document).ready(function() {
var $x1 = 0;
var $x2 = 0;
var $y1 = 0;
var $y2 = 0;
$(this).mousedown(function(e){
$x1 = e.pageX;
$y1 = e.pageY;
});
$(this).mouseup(function(e){
$x2 = e.pageX;
$y2 = e.pageY;
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.moveTo($x1, $y1);
context.lineTo($x2, $y2);
context.stroke();
});
});，问题是什么？如能提供任何帮助，将不胜感激！:)
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-06-09 09:38:21
1)如果你对图的模糊性感到烦恼，并且似乎不遵循你给出的x和y，那么你可以这样修正它：
var c = document.getElementById("myCanvas");
c.width = c.clientWidth;
c.height = c.clientHeight;2)当画布位置不在文档的左上角时，您必须考虑到由于画布位置造成的偏移：
$x1 = e.pageX-c.offsetLeft;
$y1 = e.pageY-c.offsetTop;游行示威
注意，在实际应用程序中，您不应该每次都重新创建上下文。在这种情况下，您还将在需要时开始一条新路径(可能在每次单击时)。
Stack Overflow用户
发布于 2013-06-09 09:34:17
使用.beginPath()
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 150);
context.lineTo(450, 50);
context.stroke();http://jsfiddle.net/j4XY8/ http://dev.opera.com/articles/view/html5-canvas-painting/ (可能会有帮助)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17008255
复制相关文章
相似问题
腾讯云开发者
