html5 canvas涂鴉畫板繪制圖形效果



102 404 135



特效描述:html5 canvas 涂鴉畫板 繪制圖形效果,html5涂鴉畫板

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" href="css/sketchpad.css">

2. 引入JS

<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/sketchpad.js" type="text/javascript"></script>

3. HTML代碼

<div id="main_content_wrap" class="outer">
  <section id="main_content" class="inner">
	<p class="center">undo:撤銷操作。redo:重做操作。可以通過顏色拾取器修改線條的顏色。拖動滑塊可以修改線條的尺寸。animate按鈕可以播放繪制的圖像</p>
	<div style="text-align: center">
	  <canvas class="sketchpad" id="sketchpad"><canvas>
	</div>
	<div style="text-align: center">
	  <button onClick="undo()">撤銷</button>
	  <button onClick="redo()">重做</button>
	  <input id="color-picker" type="color">
	  <input id="size-picker" type="range" min="1" max="50">
	  <button onClick="animateSketchpad()">animate</button>
	</div>
	<p class="center">你可以將sketchpad保存為Json或對象,然后在其它地方恢復原來的畫板設置:</p>
	<div style="text-align: center; margin: 12px 0 12px">
	  <button id="recover-button" onClick="recover()">生成圖像</button>
	</div>
	<div style="text-align: center">
	  <canvas class="sketchpad" id="other-sketchpad"><canvas>
	</div>
  </section>
</div>
	<script type="text/javascript">
		var sketchpad;
	      $(document).ready(function() {
	        sketchpad = new Sketchpad({
	          element: '#sketchpad',
	          width: 400,
	          height: 400
	        });
	        $('#color-picker').change(color);
	        $('#color-picker').val('#000');
	        $('#size-picker').change(size);
	        $('#size-picker').val(1);
	      });
	      function undo() {
	        sketchpad.undo();
	      }
	      function redo() {
	        sketchpad.redo();
	      }
	      function color(event) {
	        sketchpad.color = $(event.target).val();
	      }
	      function size(event) {
	        sketchpad.penSize = $(event.target).val();
	      }
	      function animateSketchpad() {
	        sketchpad.animate(10);
	      }
	      function recover(event) {
	        var settings = sketchpad.toObject();
	        settings.element = '#other-sketchpad';
	        var otherSketchpad = new Sketchpad(settings);
	        $('#recover-button').hide();
	      }
	</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 拖動 拖拽 拖動插件 拖拽插件 切換按鈕 表單 表單美化 表單插件 表單美化插件 圖片拖動 圖片拖拽 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子