求助、点击下一个的时候重行绘制页面
0
[待解决问题]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>田字格</title>
<style>
*
{
margin: 0;
padding: 0;
}
.box
{
width: 101px;
height: 101px;
float: left;
margin: 1em 0 0 1em;
background-color: #DCDCDC;
border: dashed 2px;
border-color: #A9A9A9;
}
.cav
{
position: absolute;
width: 101px;
height: 101px;
}
.x
{
position: absolute;
height: 50px;
width: 101px;
border: 0px;
border-bottom: dashed 2px;
border-color: Gray;
}
.x1
{
height: 50px;
width: 50px;
border: 0px;
border-right: dashed 2px;
border-color: Gray;
}
.x2
{
position: absolute;
margin-top: 51px;
height: 50px;
width: 50px;
border: 0px;
border-right: dashed 2px;
border-color: Gray;
}
</style>
</head>
<body>
<input id="txt" type="text" style="width: 90%; margin: 1em" value="在这里输入一段文章" onclick="txtfistclick();" /><input
type="button" value="画字" onclick="drawstring();" />
</body>
</html>
<script type="text/javascript">
function drawstring() {
$(".box").remove();
var txt = $("#txt").attr("value");
for (var i = 0; i < txt.length; i++) {//截取一个字符然后添加一个层
$("body").eq(0).append("<div cc='" + txt[i] + "' class='box' onclick='fd(this);'><div class='x'><div class='x1'></div></div><div class='x2'></div><canvas>你的浏览器不支持canvas</canvas></div>");
drawchar(txt[i], i);
}
}
function drawchar(s, n) { //参数：需要绘制的字符、该字符的位置（字符在字符串中的索引位置等于接受该字符的画板在页面的索引位置和画板的容器在页面的位置）
var canvas = $("canvas").get(n);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "#00f";
context.font = "100px sans-serif";
context.textBaseline = 'top';
var txt = s;
context.fillText(txt, 0, 0);
}
function txtfistclick() {//如果不是“第一次”输入文本则不清空文本
if ($("#txt").attr("value") == "在这里输入一段文章") {
$("#txt").attr("value", "");
}
}
// function al() {alert("0"); ("#txt").attr("value","修改了"); drawstring(); alert("1") }
function fd(v) {//放大选中的层并重绘相应字体 参数一般为this 即当前操作的对象
$(".box").css("width", "101px").css("height", "101px");
// al();//需要在这里重新调用“画字”按钮的事件 单调用后出错 无法绘制
$(v).css("width", "220px").css("height", "220px");
$($(v).children("canvas").get(0)).attr("width", "220").attr("height", "220");
var context = $(v).children("canvas").get(0).getContext("2d");
context.fillStyle = "#DCDCDC";
context.font = "200px sans-serif";
context.textBaseline = 'top';
context.fillRect(0, 0, 400, 300);
context.fillStyle = "#00f";
var txt = $(v).attr("cc");
context.fillText(txt, 0, 0);
}
</script>
<script src="../js/jquery-1.4.1.min.js" type="text/javascript"></script>
