`
rayln
  • 浏览: 433948 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

KinticJs的基本用法

 
阅读更多
Kintic是html5中canvas的一个框架,效率高,包小,非常实用,下面是一个小例子,各位要是有兴趣, 可以去官网看看
http://www.kineticjs.com/

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="kineticjs.js"></script>
</head>
<body>
<div id="content"></div>
</body>
<script>
(function(){
	var load = function(){
		var stage = new Kinetic.Stage({
	        container: "content",
	        width: 578,
	        height: 200
	    });
		var drawCurves = function(){
			var context = this.getContext();
	        var layer = this.getLayer();
	        var quad = layer.quad;
	        context.beginPath();
	        context.moveTo(quad.start[0], quad.start[1]);
	        context.quadraticCurveTo(quad.control[0], quad.control[1], quad.end[0], quad.end[1]);
	        context.strokeStyle = "red";
	        context.lineWidth = 4;
	        context.stroke();
	        context.fill();
		};
		//创造一个Canvas,可以想象为一个图层
		var layer = new Kinetic.Layer({
	    	drawFunc: drawCurves
	    });
        
		layer.quad = {
          	start: [60, 30],
          	control: [240, 110],
          	end: [80, 160]
        };
		(function(){
			//图层内的一个画画对象
        	var shape = new Kinetic.Shape({
                //points: [layer.quad.start[0], layer.quad.start[1], layer.quad.control[0], layer.quad.control[1], layer.quad.end[0], layer.quad.end[1]],
                fill: "red",
                drawFunc: drawCurves,
                alpha: 0
            });
        	shape.on("mousemove", function() {
                
            });
            layer.add(shape);
        })();
		stage.add(layer);
		
	};
	load();
})();
</script>
</html>
分享到:
评论

相关推荐

    基于net的超市管理系统源代码(完整前后端+sqlserver+说明文档+LW).zip

    功能说明: 环境说明: 开发软件:VS 2017 (版本2017以上即可,不能低于2017) 数据库:SqlServer2008r2(数据库版本无限制,都可以导入) 开发模式:mvc。。。

    LABVIEW程序实例-公式节点.zip

    labview程序代码参考学习使用,希望对你有所帮助。

    大米商城开源版damishop(适合外贸)

    大米外贸商城系统 简称damishop 完全开源版,只需做一种语言一键开启全球133中语言自动翻译功能,价格实现自动汇率转换,集成微信支付宝 paypal以及国外主流支付方式,自带文章博客系统。 软件架构 基于MVC+语言包模式,增加控制台,API导入产品方便对接其他系统(带json示例数据)。 使用要求 PHP7.4+ MYSQL5.6+ REDIS(可选) 安装方法 composer install 打开安装向导安装 http://您的域名/install 特色 1、缓存层增加时间与批量like删除 2、API产品导入方便对接其他系统 3、增加控制台命令行,命令行生成语言翻译包 4、后台一键开启自动翻译模式,支持全球133中语言,由于google代理翻译需要收费,这个功能需要付费。 5、可选购物车与ajax修改购物车产品 6、一键结算checkout 7、增加网站前台自定义路由 方便seo 更新日志 v3.9.7 集成鱼码支付接口,方便个人站长即使收款到账使用 v3.9.3 更新内容 1:增加ueditor与旧编辑器切换 2:增加可视化布局插

    LABVIEW程序实例-通过全局变量接收数据.zip

    labview程序代码参考学习使用,希望对你有所帮助。

    LABVIEW程序实例-日历控件.zip

    labview程序代码参考学习使用,希望对你有所帮助。

    毕设和企业适用springboot人工智能客服系统类及旅游规划平台源码+论文+视频.zip

    毕设和企业适用springboot人工智能客服系统类及旅游规划平台源码+论文+视频

Global site tag (gtag.js) - Google Analytics