|
|
@@ -0,0 +1,508 @@
|
|
|
+<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
|
|
|
+<%
|
|
|
+ String path = request.getContextPath();
|
|
|
+ String basePath = request.getScheme() + "://"
|
|
|
+ + request.getServerName() + ":" + request.getServerPort()
|
|
|
+ + path + "/";
|
|
|
+%>
|
|
|
+<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
|
|
+<%@page isELIgnored="false"%>
|
|
|
+<!DOCTYPE html>
|
|
|
+
|
|
|
+<head>
|
|
|
+<meta charset="UTF-8">
|
|
|
+<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
|
|
|
+<meta name="viewport"
|
|
|
+ content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
|
|
|
+<title></title>
|
|
|
+<link rel="stylesheet" type="text/css"
|
|
|
+ href="${pageContext.request.contextPath}/css/correct.css" />
|
|
|
+<style>
|
|
|
+#background {
|
|
|
+ cursor: url('${pageContext.request.contextPath}/img/cursor.png'), auto;
|
|
|
+}
|
|
|
+
|
|
|
+#annotated {
|
|
|
+ background: url('${pageContext.request.contextPath}/img/annotated.png')
|
|
|
+ no-repeat right;
|
|
|
+}
|
|
|
+
|
|
|
+.annotated:after {
|
|
|
+ position: absolute;
|
|
|
+ background: url('${pageContext.request.contextPath}/img/annotated.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ content: '';
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+}
|
|
|
+</style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div class="header">
|
|
|
+ <div class="img_button img_pencil active">
|
|
|
+ <button id="pencil">
|
|
|
+ </div>
|
|
|
+ <div class="line"></div>
|
|
|
+ <div class="color_select">
|
|
|
+ <div id="color_fadeToggle">
|
|
|
+ <ul class="color_list">
|
|
|
+ <li data-value="#000000" style="background: #000000"></li>
|
|
|
+ <li data-value="#424242" style="background: #424242"></li>
|
|
|
+ <li data-value="#626262" style="background: #626262"></li>
|
|
|
+ <li data-value="#9d9d95" style="background: #9d9d95"></li>
|
|
|
+ <li data-value="#c7c7c7" style="background: #c7c7c7"></li>
|
|
|
+ <li data-value="#efefef" style="background: #efefef"></li>
|
|
|
+ <li data-value="#f7f7f7" style="background: #f7f7f7"></li>
|
|
|
+ <li data-value="#ffffff" style="background: #ffffff"></li>
|
|
|
+ <li data-value="#ff0000" style="background: #ff0000"></li>
|
|
|
+ <li data-value="#ff9d00" style="background: #ff9d00"></li>
|
|
|
+ <li data-value="#ffff00" style="background: #ffff00"></li>
|
|
|
+ <li data-value="#00ff00" style="background: #00ff00"></li>
|
|
|
+ <li data-value="#00ffff" style="background: #00ffff"></li>
|
|
|
+ <li data-value="#0000ff" style="background: #0000ff"></li>
|
|
|
+ <li data-value="#9d00ff" style="background: #9d00ff"></li>
|
|
|
+ <li data-value="#ff00ff" style="background: #ff00ff"></li>
|
|
|
+ <li data-value="#f7c7cf" style="background: #f7c7cf"></li>
|
|
|
+ <li data-value="#ffebcb" style="background: #ffebcb"></li>
|
|
|
+ <li data-value="#ffebcb" style="background: #ffebcb"></li>
|
|
|
+ <li data-value="#d7efd7" style="background: #d7efd7"></li>
|
|
|
+ <li data-value="#d3dbe7" style="background: #d3dbe7"></li>
|
|
|
+ <li data-value="#cfe7f7" style="background: #cfe7f7"></li>
|
|
|
+ <li data-value="#d3dbe7" style="background: #d3dbe7"></li>
|
|
|
+ <li data-value="#e7d7df" style="background: #e7d7df"></li>
|
|
|
+ <li data-value="#e79d9d" style="background: #e79d9d"></li>
|
|
|
+ <li data-value="#ffc79d" style="background: #ffc79d"></li>
|
|
|
+ <li data-value="#ffe79d" style="background: #ffe79d"></li>
|
|
|
+ <li data-value="#b5d7a5" style="background: #b5d7a5"></li>
|
|
|
+ <li data-value="#a5c7cf" style="background: #a5c7cf"></li>
|
|
|
+ <li data-value="#9dc7ef" style="background: #9dc7ef"></li>
|
|
|
+ <li data-value="#b5a5d7" style="background: #b5a5d7"></li>
|
|
|
+ <li data-value="#d7a5bd" style="background: #d7a5bd"></li>
|
|
|
+ <li data-value="#e76262" style="background: #e76262"></li>
|
|
|
+ <li data-value="#f7ad6a" style="background: #f7ad6a"></li>
|
|
|
+ <li data-value="#ffd762" style="background: #ffd762"></li>
|
|
|
+ <li data-value="#95bd7a" style="background: #95bd7a"></li>
|
|
|
+ <li data-value="#72a5ad" style="background: #72a5ad"></li>
|
|
|
+ <li data-value="#6aaddf" style="background: #6aaddf"></li>
|
|
|
+ <li data-value="#8d7ac7" style="background: #8d7ac7"></li>
|
|
|
+ <li data-value="#c77aa5" style="background: #c77aa5"></li>
|
|
|
+ <li data-value="#cf0000" style="background: #cf0000"></li>
|
|
|
+ <li data-value="#e79538" style="background: #e79538"></li>
|
|
|
+ <li data-value="#efc730" style="background: #efc730"></li>
|
|
|
+ <li data-value="#6aa54a" style="background: #6aa54a"></li>
|
|
|
+ <li data-value="#4a7a8d" style="background: #4a7a8d"></li>
|
|
|
+ <li data-value="#385c7" style="background: #3885c7"></li>
|
|
|
+ <li data-value="#624aa5" style="background: #624aa5"></li>
|
|
|
+ <li data-value="#a54a7a" style="background: #a54a7a"></li>
|
|
|
+ <li data-value="#9d0000" style="background: #9d0000"></li>
|
|
|
+ <li data-value="#b56208" style="background: #b56208"></li>
|
|
|
+ <li data-value="#bd9500" style="background: #bd9500"></li>
|
|
|
+ <li data-value="#387a20" style="background: #387a20"></li>
|
|
|
+ <li data-value="#104a5a" style="background: #104a5a"></li>
|
|
|
+ <li data-value="#085295" style="background: #085295"></li>
|
|
|
+ <li data-value="#301872" style="background: #301872"></li>
|
|
|
+ <li data-value="#721842" style="background: #721842"></li>
|
|
|
+ <li data-value="#620000" style="background: #620000"></li>
|
|
|
+ <li data-value="#7a3800" style="background: #7a3800"></li>
|
|
|
+ <li data-value="#285218" style="background: #285218"></li>
|
|
|
+ <li data-value="#285218" style="background: #285218"></li>
|
|
|
+ <li data-value="#083038" style="background: #083038"></li>
|
|
|
+ <li data-value="#003062" style="background: #003062"></li>
|
|
|
+ <li data-value="#20104a" style="background: #20104a"></li>
|
|
|
+ <li data-value="#4a1030" style="background: #4a1030"></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <input type="range" max="15" min="1" id="range" />
|
|
|
+ <div class="line"></div>
|
|
|
+ <div class="img_button img_empty">
|
|
|
+ <button id="clear_canvas">
|
|
|
+ </div>
|
|
|
+ <div class="img_button img_save">
|
|
|
+ <button id="save_canvas">
|
|
|
+ </div>
|
|
|
+ <div class="img_button img_download">
|
|
|
+ <button id="download">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="sidebar_left">
|
|
|
+ <ul class="img_select">
|
|
|
+ <c:forEach var="i" begin="1" end="${correct_number}">
|
|
|
+ <li id="img_${i}" class=""><img
|
|
|
+ src="${pageContext.request.contextPath}/Document/correct/img/${correct}/${i}.png"
|
|
|
+ id="annotated" />
|
|
|
+ </form></li>
|
|
|
+
|
|
|
+ </c:forEach>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="main">
|
|
|
+ <div class="correct">
|
|
|
+ <div id="background"
|
|
|
+ style="background-image:url('${pageContext.request.contextPath}/Document/correct/img/${correct}/1.png'); background-size: 100% 100%; background-repeat: no-repeat;">
|
|
|
+ <canvas id="canvas"></canvas>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"
|
|
|
+ type="text/javascript" charset="utf-8"></script>
|
|
|
+ <script src="${pageContext.request.contextPath}/js/correct.js"
|
|
|
+ type="text/javascript" charset="utf-8"></script>
|
|
|
+ <script type="text/javascript">
|
|
|
+ //获取id为background的对象
|
|
|
+ var background = document.getElementById("background")
|
|
|
+ <c:forEach var="a" begin="1" end="${correct_number}">
|
|
|
+ //a代表当前条目的变量名称
|
|
|
+ $("#img_${a}")
|
|
|
+ .click(
|
|
|
+ function() {
|
|
|
+
|
|
|
+ //获取批注的base64编码
|
|
|
+ var image = new Image();
|
|
|
+ image.src = canvas.toDataURL("image/png");//得到图片的BASE64码
|
|
|
+ var abc = image.src
|
|
|
+ //base64 编码中含有大量加号，而+在 URL 传递时会被当成空格
|
|
|
+ var base64_ = abc.replace(/\+/g, '%2B');
|
|
|
+
|
|
|
+ // 获取id为correct中的backgroundImage值
|
|
|
+ var a = document.getElementById("background").style.backgroundImage;
|
|
|
+ // 通过正则表达式得知当前正在批注的图片
|
|
|
+ var str = a.match(/([^/]+).png/)[1];
|
|
|
+ // 替换id为background对象的背景图片
|
|
|
+ document.getElementById("background").style.cssText = "background-image: url(${pageContext.request.contextPath}/Document/correct/img/${correct}/${a}.png);background-size: 100% 100%;background-repeat: no-repeat;"
|
|
|
+
|
|
|
+ // 通过ajax将获取到的base64以post方式传输到后台处理
|
|
|
+ var xmlhttp;
|
|
|
+ if (window.XMLHttpRequest) {
|
|
|
+ // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
|
|
|
+ xmlhttp = new XMLHttpRequest();
|
|
|
+ } else {
|
|
|
+ // IE6, IE5 浏览器执行代码
|
|
|
+ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
|
|
|
+ }
|
|
|
+ xmlhttp.open("POST", "Encode", true);
|
|
|
+ xmlhttp.setRequestHeader("Content-Type",
|
|
|
+ "application/x-www-form-urlencoded");
|
|
|
+ xmlhttp.send("img_name=" + str + "&base64="
|
|
|
+ + base64_);
|
|
|
+ //消除批注
|
|
|
+ cvs.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
+ });
|
|
|
+ </c:forEach>
|
|
|
+ $(function() {
|
|
|
+ var xmlhttp;
|
|
|
+ if (window.XMLHttpRequest) {
|
|
|
+ // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
|
|
|
+ xmlhttp = new XMLHttpRequest();
|
|
|
+ } else {
|
|
|
+ // IE6, IE5 浏览器执行代码
|
|
|
+ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
|
|
|
+ }
|
|
|
+ xmlhttp.open("POST", "Magic", true);
|
|
|
+ xmlhttp.setRequestHeader("Content-Type",
|
|
|
+ "application/x-www-form-urlencoded");
|
|
|
+ xmlhttp.send("number=" + ${correct_number});
|
|
|
+
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
|
|
+
|
|
|
+<!--
|
|
|
+<head>
|
|
|
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
+<title>javascript结合html5 canvas实现的涂鸦板 - 分享JavaScript-sharejs.com</title>
|
|
|
+<meta name="Copyright" content="JavaScript分享网 http://www.sharejs.com/" />
|
|
|
+<meta name="description" content="javascript结合html5 canvas实现的涂鸦板,JavaScript分享网，js脚本，网页特效，网页模板，png图标，矢量图下载" />
|
|
|
+<meta content="JavaScript,分享,JavaScript代码,Ajax,jQuery,网页模板,PNG图标，矢量图" name="keywords" />
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<style>
|
|
|
+*{margin:0;padding:0;}
|
|
|
+.fa{width:740px;margin:0 auto;}
|
|
|
+.top{margin:20px 0;}
|
|
|
+.top input{width:25px;height:25px;border:1px solid #fff;border-radius:4px;background:#ddd;}
|
|
|
+.top .i1{background:#000000;}
|
|
|
+.top .i2{background:#FF0000;}
|
|
|
+.top .i3{background:#80FF00;}
|
|
|
+.top .i4{background:#00FFFF;}
|
|
|
+.top .i5{background:#808080;}
|
|
|
+.top .i6{background:#FF8000;}
|
|
|
+.top .i7{background:#408080;}
|
|
|
+.top .i8{background:#8000FF;}
|
|
|
+.top .i9{background:#CCCC00;}
|
|
|
+#canvas{background:#eee;cursor:default;}
|
|
|
+.font input{font-size:14px;}
|
|
|
+.top .grea{background:#aaa;}
|
|
|
+</style>
|
|
|
+
|
|
|
+<body>
|
|
|
+<div class="fa">
|
|
|
+<div class="top">
|
|
|
+<div id="color">
|
|
|
+请选择画笔颜色：
|
|
|
+<input class="i1" type="button" value="" />
|
|
|
+<input class="i2" type="button" value="" />
|
|
|
+<input class="i3" type="button" value="" />
|
|
|
+<input class="i4" type="button" value="" />
|
|
|
+<input class="i5" type="button" value="" />
|
|
|
+<input class="i6" type="button" value="" />
|
|
|
+<input class="i7" type="button" value="" />
|
|
|
+<input class="i8" type="button" value="" />
|
|
|
+<input class="i9" type="button" value="" />
|
|
|
+</div>
|
|
|
+<div class="font" id="font">
|
|
|
+请选择画笔的宽度：
|
|
|
+<input type="button" value="细" />
|
|
|
+<input type="button" value="中" class="grea"/>
|
|
|
+<input type="button" value="粗" />
|
|
|
+</div>
|
|
|
+<div>
|
|
|
+<span id="error">如果有错误，请使用橡皮擦：</span>
|
|
|
+<input id="eraser" style="width:60px;font-size:14px;"type="button" value="橡皮擦" > </input>
|
|
|
+</div>
|
|
|
+<input id="clear" type="button" value="清除画布" style="width:80px;"/>
|
|
|
+<input id="revocation" type="button" value="撤销" style="width:80px;"/>
|
|
|
+<input id="imgurl" type="button" value="导出图片路径" style="width:85px;"/>
|
|
|
+</div>
|
|
|
+<canvas id="canvas" width="740" height="420">您的浏览器不支持 canvas 标签</canvas>
|
|
|
+<div id="div1"></div>
|
|
|
+</div>
|
|
|
+<div id="html">
|
|
|
+</div>
|
|
|
+<script>
|
|
|
+(function(){
|
|
|
+var paint={
|
|
|
+init:function()
|
|
|
+{
|
|
|
+this.load();
|
|
|
+},
|
|
|
+load:function()
|
|
|
+{
|
|
|
+this.x=[];//记录鼠标移动是的X坐标
|
|
|
+this.y=[];//记录鼠标移动是的Y坐标
|
|
|
+this.clickDrag=[];
|
|
|
+this.lock=false;//鼠标移动前，判断鼠标是否按下
|
|
|
+this.isEraser=false;
|
|
|
+//this.Timer=null;//橡皮擦启动计时器
|
|
|
+//this.radius=5;
|
|
|
+this.storageColor="#000000";
|
|
|
+this.eraserRadius=15;//擦除半径值
|
|
|
+this.color=["#000000","#FF0000","#80FF00","#00FFFF","#808080","#FF8000","#408080","#8000FF","#CCCC00"];//画笔颜色值
|
|
|
+this.fontWeight=[2,5,8];
|
|
|
+this.$=function(id){return typeof id=="string"?document.getElementById(id):id;};
|
|
|
+this.canvas=this.$("canvas");
|
|
|
+if (this.canvas.getContext) {
|
|
|
+} else {
|
|
|
+alert("您的浏览器不支持 canvas 标签");
|
|
|
+return;
|
|
|
+}
|
|
|
+this.cxt=this.canvas.getContext('2d');
|
|
|
+this.cxt.lineJoin = "round";//context.lineJoin - 指定两条线段的连接方式
|
|
|
+this.cxt.lineWidth = 5;//线条的宽度
|
|
|
+this.iptClear=this.$("clear");
|
|
|
+this.revocation=this.$("revocation");
|
|
|
+this.imgurl=this.$("imgurl");//图片路径按钮
|
|
|
+this.w=this.canvas.width;//取画布的宽
|
|
|
+this.h=this.canvas.height;//取画布的高
|
|
|
+this.touch =("createTouch" in document);//判定是否为手持设备
|
|
|
+this.StartEvent = this.touch ? "touchstart" : "mousedown";//支持触摸式使用相应的事件替代
|
|
|
+this.MoveEvent = this.touch ? "touchmove" : "mousemove";
|
|
|
+this.EndEvent = this.touch ? "touchend" : "mouseup";
|
|
|
+this.bind();
|
|
|
+},
|
|
|
+bind:function()
|
|
|
+{
|
|
|
+var t=this;
|
|
|
+/*清除画布*/
|
|
|
+this.iptClear.onclick=function()
|
|
|
+{
|
|
|
+t.clear();
|
|
|
+};
|
|
|
+/*鼠标按下事件，记录鼠标位置，并绘制，解锁lock，打开mousemove事件*/
|
|
|
+this.canvas['on'+t.StartEvent]=function(e)
|
|
|
+{
|
|
|
+var touch=t.touch ? e.touches[0] : e;
|
|
|
+var _x=touch.clientX - touch.target.offsetLeft;//鼠标在画布上的x坐标，以画布左上角为起点
|
|
|
+var _y=touch.clientY - touch.target.offsetTop;//鼠标在画布上的y坐标，以画布左上角为起点
|
|
|
+if(t.isEraser)
|
|
|
+{
|
|
|
+/*
|
|
|
+t.cxt.globalCompositeOperation = "destination-out";
|
|
|
+t.cxt.beginPath();
|
|
|
+t.cxt.arc(_x, _y,t.eraserRadius, 0, Math.PI * 2);
|
|
|
+t.cxt.strokeStyle = "rgba(250,250,250,0)";
|
|
|
+t.cxt.fill();
|
|
|
+t.cxt.globalCompositeOperation = "source-over";
|
|
|
+*/
|
|
|
+t.resetEraser(_x,_y,touch);
|
|
|
+}else
|
|
|
+{
|
|
|
+t.movePoint(_x,_y);//记录鼠标位置
|
|
|
+t.drawPoint();//绘制路线
|
|
|
+}
|
|
|
+t.lock=true;
|
|
|
+};
|
|
|
+/*鼠标移动事件*/
|
|
|
+this.canvas['on'+t.MoveEvent]=function(e)
|
|
|
+{
|
|
|
+var touch=t.touch ? e.touches[0] : e;
|
|
|
+if(t.lock)//t.lock为true则执行
|
|
|
+{
|
|
|
+var _x=touch.clientX - touch.target.offsetLeft;//鼠标在画布上的x坐标，以画布左上角为起点
|
|
|
+var _y=touch.clientY - touch.target.offsetTop;//鼠标在画布上的y坐标，以画布左上角为起点
|
|
|
+if(t.isEraser)
|
|
|
+{
|
|
|
+//if(t.Timer)clearInterval(t.Timer);
|
|
|
+//t.Timer=setInterval(function(){
|
|
|
+t.resetEraser(_x,_y,touch);
|
|
|
+//},10);
|
|
|
+}
|
|
|
+else
|
|
|
+{
|
|
|
+t.movePoint(_x,_y,true);//记录鼠标位置
|
|
|
+t.drawPoint();//绘制路线
|
|
|
+}
|
|
|
+}
|
|
|
+};
|
|
|
+this.canvas['on'+t.EndEvent]=function(e)
|
|
|
+{
|
|
|
+/*重置数据*/
|
|
|
+t.lock=false;
|
|
|
+t.x=[];
|
|
|
+t.y=[];
|
|
|
+t.clickDrag=[];
|
|
|
+clearInterval(t.Timer);
|
|
|
+t.Timer=null;
|
|
|
+};
|
|
|
+this.revocation.onclick=function()
|
|
|
+{
|
|
|
+t.redraw();
|
|
|
+};
|
|
|
+this.changeColor();
|
|
|
+this.imgurl.onclick=function()
|
|
|
+{
|
|
|
+t.getUrl();
|
|
|
+};
|
|
|
+/*橡皮擦*/
|
|
|
+this.$("eraser").onclick=function(e)
|
|
|
+{
|
|
|
+t.isEraser=true;
|
|
|
+t.$("error").style.color="red";
|
|
|
+t.$("error").innerHTML="您已使用橡皮擦！";
|
|
|
+};
|
|
|
+},
|
|
|
+movePoint:function(x,y,dragging)
|
|
|
+{
|
|
|
+/*将鼠标坐标添加到各自对应的数组里*/
|
|
|
+this.x.push(x);
|
|
|
+this.y.push(y);
|
|
|
+this.clickDrag.push(y);
|
|
|
+},
|
|
|
+drawPoint:function(x,y,radius)
|
|
|
+{
|
|
|
+for(var i=0; i < this.x.length; i++)//循环数组
|
|
|
+{
|
|
|
+this.cxt.beginPath();//context.beginPath() , 准备绘制一条路径
|
|
|
+if(this.clickDrag[i] && i){//当是拖动而且i!=0时，从上一个点开始画线。
|
|
|
+this.cxt.moveTo(this.x[i-1], this.y[i-1]);//context.moveTo(x, y) , 新开一个路径，并指定路径的起点
|
|
|
+}else{
|
|
|
+this.cxt.moveTo(this.x[i]-1, this.y[i]);
|
|
|
+}
|
|
|
+this.cxt.lineTo(this.x[i], this.y[i]);//context.lineTo(x, y) , 将当前点与指定的点用一条笔直的路径连接起来
|
|
|
+this.cxt.closePath();//context.closePath() , 如果当前路径是打开的则关闭它
|
|
|
+this.cxt.stroke();//context.stroke() , 绘制当前路径
|
|
|
+}
|
|
|
+},
|
|
|
+clear:function()
|
|
|
+{
|
|
|
+this.cxt.clearRect(0, 0, this.w, this.h);//清除画布，左上角为起点
|
|
|
+},
|
|
|
+redraw:function()
|
|
|
+{
|
|
|
+/*撤销*/
|
|
|
+this.cxt.restore();
|
|
|
+},
|
|
|
+preventDefault:function(e){
|
|
|
+/*阻止默认*/
|
|
|
+var touch=this.touch ? e.touches[0] : e;
|
|
|
+if(this.touch)touch.preventDefault();
|
|
|
+else window.event.returnValue = false;
|
|
|
+},
|
|
|
+changeColor:function()
|
|
|
+{
|
|
|
+/*为按钮添加事件*/
|
|
|
+var t=this,iptNum=this.$("color").getElementsByTagName("input"),fontIptNum=this.$("font").getElementsByTagName("input");
|
|
|
+for(var i=0,l=iptNum.length;i<l;i++)
|
|
|
+{
|
|
|
+iptNum[i].index=i;
|
|
|
+iptNum[i].onclick=function()
|
|
|
+{
|
|
|
+t.cxt.save();
|
|
|
+t.cxt.strokeStyle = t.color[this.index];
|
|
|
+t.storageColor=t.color[this.index];
|
|
|
+t.$("error").style.color="#000";
|
|
|
+t.$("error").innerHTML="如果有错误，请使用橡皮擦：";
|
|
|
+t.cxt.strokeStyle = t.storageColor;
|
|
|
+t.isEraser=false;
|
|
|
+}
|
|
|
+}
|
|
|
+for(var i=0,l=fontIptNum.length;i<l;i++)
|
|
|
+{
|
|
|
+t.cxt.save();
|
|
|
+fontIptNum[i].index=i;
|
|
|
+fontIptNum[i].onclick=function()
|
|
|
+{
|
|
|
+t.changeBackground(this.index);
|
|
|
+t.cxt.lineWidth = t.fontWeight[this.index];
|
|
|
+t.$("error").style.color="#000";
|
|
|
+t.$("error").innerHTML="如果有错误，请使用橡皮擦：";
|
|
|
+t.isEraser=false;
|
|
|
+t.cxt.strokeStyle = t.storageColor;
|
|
|
+}
|
|
|
+}
|
|
|
+},
|
|
|
+changeBackground:function(num)
|
|
|
+{
|
|
|
+/*添加画笔粗细的提示背景颜色切换，灰色为当前*/
|
|
|
+var fontIptNum=this.$("font").getElementsByTagName("input");
|
|
|
+for(var j=0,m=fontIptNum.length;j<m;j++)
|
|
|
+{
|
|
|
+fontIptNum[j].className="";
|
|
|
+if(j==num) fontIptNum[j].className="grea";
|
|
|
+}
|
|
|
+},
|
|
|
+getUrl:function()
|
|
|
+{
|
|
|
+this.$("html").innerHTML=this.canvas.toDataURL();
|
|
|
+},
|
|
|
+resetEraser:function(_x,_y,touch)
|
|
|
+{
|
|
|
+/*使用橡皮擦-提醒*/
|
|
|
+var t=this;
|
|
|
+//this.cxt.lineWidth = 30;
|
|
|
+/*source-over 默认,相交部分由后绘制图形的填充(颜色,渐变,纹理)覆盖,全部浏览器通过*/
|
|
|
+t.cxt.globalCompositeOperation = "destination-out";
|
|
|
+t.cxt.beginPath();
|
|
|
+t.cxt.arc(_x, _y, t.eraserRadius, 0, Math.PI * 2);
|
|
|
+t.cxt.strokeStyle = "rgba(250,250,250,0)";
|
|
|
+t.cxt.fill();
|
|
|
+t.cxt.globalCompositeOperation = "source-over"
|
|
|
+}
|
|
|
+};
|
|
|
+paint.init();
|
|
|
+})();
|
|
|
+</script>
|
|
|
+<div style="clear:both"></div>
|
|
|
+</body>
|
|
|
+</html>
|
|
|
+
|
|
|
+-->
|
