谁能推荐个可视化编辑生成html5 画布的js代码

kkk6965921k 2014-01-08 08:07:45

谁能推荐个可视化编辑生成html5 画布的js代码（不要生成css3) 听说flash cc可以但我电脑是32bit没法用谁能再推荐个其他的

...全文

296 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

chenhao110am 2014-01-10

打赏
举报

我最近也在学习html5大家一起交流

kkk6965921k 2014-01-09

打赏
举报

引用 3 楼 chenhao110am 的回复:

案例：制作画图板代码。
Html5代码：
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>canvas_01</title>
		<style type="text/css">
			#chenhao{
				border: 1px solid #ccc;
			}
		</style>
		<script src="jquery-1.7.2.js"></script>
	</head>
	<body>
         <canvas id="chenhao" width="500" height="400">
         </canvas>
         <script src="345.js"></script>        
	</body>
</html>
Js代码：
var c = document.getElementById("chenhao");
var chen = c.getContext("2d");
   chen.lineWidth=5;//定义线条的宽度
   chen.strokeStyle="red";//定义当前线条的颜色
   var pp = false;   //定义一个不能画图的
  $("#chenhao").mousedown(function(e){   //当鼠标按下的时候
  	      var mouseX = e.pageX - this.offsetLeft;// 获取区域坐标X,已经减去了当前页面的左边界
          var mouseY = e.pageY - this.offsetTop;// 获取区域坐标Y,减去了当前页面的上边界。
          pp = true;
          chen.moveTo(mouseX,mouseY);    //起始位置
          
  });
  $("#chenhao").mouseup(function(e){     //当鼠标抬起时
  	   pp=false; 
  });
  $("#chenhao").mousemove(function(e){   //当鼠标移动到这个区域时。
  	   var mouseX = e.pageX - this.offsetLeft;// 获取区域坐标X,已经减去了当前页面的左边界
       var mouseY = e.pageY - this.offsetTop;// 获取区域坐标Y,减去了当前页面的上边界。
  	  if(pp){
  	   chen.lineTo(mouseX,mouseY);   //终止位置
       chen.stroke();             //结束图形
     
      }
  });

其实我主要做文字特效。。。生成js

chenhao110am 2014-01-09

打赏
举报

案例：制作画图板代码。
Html5代码：
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>canvas_01</title>
		<style type="text/css">
			#chenhao{
				border: 1px solid #ccc;
			}
		</style>
		<script src="jquery-1.7.2.js"></script>
	</head>
	<body>
         <canvas id="chenhao" width="500" height="400">
         </canvas>
         <script src="345.js"></script>        
	</body>
</html>
Js代码：
var c = document.getElementById("chenhao");
var chen = c.getContext("2d");
   chen.lineWidth=5;//定义线条的宽度
   chen.strokeStyle="red";//定义当前线条的颜色
   var pp = false;   //定义一个不能画图的
  $("#chenhao").mousedown(function(e){   //当鼠标按下的时候
  	      var mouseX = e.pageX - this.offsetLeft;// 获取区域坐标X,已经减去了当前页面的左边界
          var mouseY = e.pageY - this.offsetTop;// 获取区域坐标Y,减去了当前页面的上边界。
          pp = true;
          chen.moveTo(mouseX,mouseY);    //起始位置
          
  });
  $("#chenhao").mouseup(function(e){     //当鼠标抬起时
  	   pp=false; 
  });
  $("#chenhao").mousemove(function(e){   //当鼠标移动到这个区域时。
  	   var mouseX = e.pageX - this.offsetLeft;// 获取区域坐标X,已经减去了当前页面的左边界
       var mouseY = e.pageY - this.offsetTop;// 获取区域坐标Y,减去了当前页面的上边界。
  	  if(pp){
  	   chen.lineTo(mouseX,mouseY);   //终止位置
       chen.stroke();             //结束图形
     
      }
  });