html5 canvas涂鸦画板绘制图形效果



96 380 127



特效描述: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

加群请备注:从官网了解到