createjs初学-创建一个button

本文介绍了如何在CreateJS中使用ButtonHelper、Sprite和SpriteSheet创建一个交互式按钮。通过定义images、frames和animations,设置不同状态的显示帧,并通过ButtonHelper将精灵添加到舞台上,实现按钮的鼠标交互效果。别忘了启用over状态以完整实现按钮功能。
摘要由CSDN通过智能技术生成

在createjs中创建button是用ButtonHelper,实际上还要用到Sprite和SpriteSheet这两个类。下面是一个最简单的button。

var data={
        images:["out.png","down.png"],
        frames:[
            [0,0,135,43,0],
            [0,0,135,43,1]
        ],
        animations:{
            out:0,
            down:1
        }
 }
 var sheet=new createjs.Sprite
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是基于createjs库制作的画画房间代码,包括可选颜色、橡皮擦和画笔大小功能: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>画画房间</title> <style> canvas { border: 1px solid #000; } </style> </head> <body> <canvas id="canvas" width="800" height="600"></canvas> <div> <label>画笔颜色:</label> <select id="color"> <option value="#000000">黑色</option> <option value="#ff0000">红色</option> <option value="#00ff00">绿色</option> <option value="#0000ff">蓝色</option> <option value="#ffff00">黄色</option> </select> <label>画笔大小:</label> <select id="size"> <option value="5">小</option> <option value="10" selected>中</option> <option value="15">大</option> </select> <button id="eraser">橡皮擦</button> <button id="clear">清空</button> </div> <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script> <script> var stage, canvas, shape, color, size, eraser, clear; function init() { canvas = document.getElementById("canvas"); stage = new createjs.Stage(canvas); shape = new createjs.Shape(); stage.addChild(shape); color = document.getElementById("color"); size = document.getElementById("size"); eraser = document.getElementById("eraser"); clear = document.getElementById("clear"); stage.addEventListener("stagemousedown", handleMouseDown); stage.addEventListener("stagemousemove", handleMouseMove); stage.addEventListener("stagemouseup", handleMouseUp); eraser.addEventListener("click", function() { color.value = "#ffffff"; }); clear.addEventListener("click", function() { shape.graphics.clear(); stage.update(); }); createjs.Ticker.addEventListener("tick", stage); } function handleMouseDown(event) { shape.graphics.setStrokeStyle(size.value, "round", "round") .beginStroke(color.value) .moveTo(stage.mouseX, stage.mouseY); stage.addEventListener("stagemousemove", handleMouseMove); } function handleMouseMove(event) { shape.graphics.lineTo(stage.mouseX, stage.mouseY); stage.update(); } function handleMouseUp(event) { stage.removeEventListener("stagemousemove", handleMouseMove); } window.onload = function() { init(); }; </script> </body> </html> ``` 代码中,我们创建了一个画布和一个`Shape`对象用于存储画画的图形。通过`select`元素和`button`元素实现了可选颜色、橡皮擦和清空功能。在`init()`函数中,我们初始化了画布和`Shape`对象,并添加了鼠标事件监听器。在鼠标按下时,我们开始绘制图形,并在移动鼠标时不断更新绘制的图形。在鼠标松开时,停止绘制图形。最后,通过`Ticker`对象来更新画布显示。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值