zoukankan      html  css  js  c++  java
  • HTML5 canvas 在线涂鸦

    插件地址

    http://bencentra.github.io/jq-signature/

    采用技术

    • jq-signature.min.js
    • Developed using jQuery 2.1.4.
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="jquery.min.js"></script>
    <script src="jq-signature.min.js"></script>
    <script>
    	$(function(){
    		$('.js-signature').jqSignature();
    	})
    	function clearCanvas() {
    		$('#signature').html('<p><em>Your signature will appear here when you click "Save Signature"</em></p>');
    		$('.js-signature').eq(1).jqSignature('clearCanvas');
    		$('#saveBtn').attr('disabled', true);
    	}
    
    	function saveSignature() {
    		$('#signature').empty();
    		var dataUrl = $('.js-signature').jqSignature('getDataURL');
    		var img = $('<img>').attr('src', dataUrl);
    		$('#signature').append($('<p>').text("Here's your signature:"));
    		$('#signature').append(img);
    	}
    
    	$('.js-signature').eq(1).on('jq.signature.changed', function() {
    		$('#saveBtn').attr('disabled', false);
    	});
    </script>
    </head>
    <body>
    <div class="js-signature" data-width="600" data-height="200" data-border="1px solid black" data-line-color="#bc0000" data-auto-fit="true"></div>
    			<p><button id="clearBtn" class="btn btn-default" onclick="clearCanvas();">Clear Canvas</button> 
    			<button id="saveBtn" class="btn btn-default" onclick="saveSignature();" >Save Signature</button></p>
    <div id="signature">
    				<p><em>Your signature will appear here when you click "Save Signature"</em></p>
    			</div>
    </body>
    </html>
    

    截图

  • 相关阅读:
    [Unity3D]计时器/Timer
    unity缓存和浏览器缓存
    unity3d进行脚本资源打包加载
    Unity3d删除无用的美术资源
    项目经理的职责(转载)
    LINQ
    生意经
    Android ListView标题置顶效果实现
    ListView的自动循环滚动显示
    郭霖的专栏
  • 原文地址:https://www.cnblogs.com/qingmiaokeji/p/10988911.html
Copyright © 2011-2022 走看看