关于html5 canvas的问题，帮忙看下代码吧！我发现长方形被选中的效果不对 10
......但是找不出原因，请大家帮帮忙<html><head><title>animationsqure</title><styletype="text/css">ca...
......但是找不出原因，请大家帮帮忙
<html>
<head>
<title>animation squre</title>
<style type="text/css">
canvas {
border: 1px solid blue;
}
</style>
<script type="text/javascript">
var canvas;
var context;
var squres = [];
var colors = ["green","black","orange","brown","gold","#42c8e8","red","purple"];
function Squre(x,y,width,height,squreSpeed) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.squreSpeed = squreSpeed;
this.isSelected = false;
}
function randomFromTo(from,to) {
return Math.floor(Math.random()*(to - from + 1) + from);
}
window.onload = function() {
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
canvas.onmousedown = canvasClick;
setTimeout(drawFrame,20);
}
//添加矩形
function addRandomSqures() {
var x = randomFromTo(10,700);
var y = randomFromTo(10,300);
var squre = new Squre(x,y,100,70,2);
squres.push(squre);
}
//画出矩形，如果选中属性为“true",加厚边框
function drawFrame() {
var randomStrokeColor = colors[randomFromTo(0,7)];
var randomFillColor = colors[randomFromTo(0,7)];
context.clearRect(0,0,canvas.width,canvas.height);
for (var i = 0; i < squres.length; i++) {
var squre = squres[i];
context = canvas.getContext("2d");
context.beginPath();
context.rect(squre.x,squre.y,squre.width,squre.height);
context.lineStyle = "black";
context.fill();
context.stroke();
squre.y += squre.squreSpeed;
if (squre.isSelected == true) {
context.lineWidth = 6;
}
if (squre.squreSpeed > 0) {
if (squre.y + squre.height >= canvas.height) {
squre.squreSpeed = -squre.squreSpeed;
context.strokeStyle = randomStrokeColor;
context.fillStyle = randomFillColor;
}
}
if (squre.squreSpeed < 0) {
if (squre.y <= 0) {
squre.squreSpeed = -squre.squreSpeed;
context.strokeStyle = randomStrokeColor;
context.fillStyle = randomFillColor;
}
}
}
setTimeout(drawFrame,20);
}
(这里是接下来的代码......） //测试看鼠标点击位置是否位于矩形内
var previousSelectedSqure;
function canvasClick(e) {
var clickX = e.pageX - canvas.offsetLeft;
var clickY = e.pageY - canvas.offsetTop;
for (var i = squres.length - 1; i >= 0; i--) {
var squre = squres[i]; 展开
<html>
<head>
<title>animation squre</title>
<style type="text/css">
canvas {
border: 1px solid blue;
}
</style>
<script type="text/javascript">
var canvas;
var context;
var squres = [];
var colors = ["green","black","orange","brown","gold","#42c8e8","red","purple"];
function Squre(x,y,width,height,squreSpeed) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.squreSpeed = squreSpeed;
this.isSelected = false;
}
function randomFromTo(from,to) {
return Math.floor(Math.random()*(to - from + 1) + from);
}
window.onload = function() {
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
canvas.onmousedown = canvasClick;
setTimeout(drawFrame,20);
}
//添加矩形
function addRandomSqures() {
var x = randomFromTo(10,700);
var y = randomFromTo(10,300);
var squre = new Squre(x,y,100,70,2);
squres.push(squre);
}
//画出矩形，如果选中属性为“true",加厚边框
function drawFrame() {
var randomStrokeColor = colors[randomFromTo(0,7)];
var randomFillColor = colors[randomFromTo(0,7)];
context.clearRect(0,0,canvas.width,canvas.height);
for (var i = 0; i < squres.length; i++) {
var squre = squres[i];
context = canvas.getContext("2d");
context.beginPath();
context.rect(squre.x,squre.y,squre.width,squre.height);
context.lineStyle = "black";
context.fill();
context.stroke();
squre.y += squre.squreSpeed;
if (squre.isSelected == true) {
context.lineWidth = 6;
}
if (squre.squreSpeed > 0) {
if (squre.y + squre.height >= canvas.height) {
squre.squreSpeed = -squre.squreSpeed;
context.strokeStyle = randomStrokeColor;
context.fillStyle = randomFillColor;
}
}
if (squre.squreSpeed < 0) {
if (squre.y <= 0) {
squre.squreSpeed = -squre.squreSpeed;
context.strokeStyle = randomStrokeColor;
context.fillStyle = randomFillColor;
}
}
}
setTimeout(drawFrame,20);
}
(这里是接下来的代码......） //测试看鼠标点击位置是否位于矩形内
var previousSelectedSqure;
function canvasClick(e) {
var clickX = e.pageX - canvas.offsetLeft;
var clickY = e.pageY - canvas.offsetTop;
for (var i = squres.length - 1; i >= 0; i--) {
var squre = squres[i]; 展开
- 你的回答被采纳后将获得：
- 系统奖励15（财富值+成长值）+难题奖励10（财富值+成长值）+提问者悬赏10（财富值+成长值）
展开全部
var clickY = e.pageY - canvas.offsetTop;
这句话导致的问题，我现在在判断是否选中线段的时候也出现了这个问题，clickY 与实际的Y不一致，也正在找规律。
这句话导致的问题，我现在在判断是否选中线段的时候也出现了这个问题，clickY 与实际的Y不一致，也正在找规律。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
