Matter.js更改颜色
Matter.js更改颜色
提问于 2014-03-27 19:58:20
我正在和matter.js一起做一个小项目。
我正在尝试更改画布的背景颜色，并为对象添加自定义颜色。
有没有人知道样式化matter.js的教程或东西？
Matter.js
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-05-08 22:32:55
这些属性是body.render.fillStyle、body.render.strokeStyle和body.render.lineWidth。
您可以将这些内容传递给Body.create(options)，如果您使用的是工厂，则更有可能。
Bodies.rectangle(0, 0, 100, 100, {
render: {
fillStyle: 'red',
strokeStyle: 'blue',
lineWidth: 3
}
});您也可以使用sprites，请参见the code
如果你需要更多的渲染控制，最好是克隆Render.js，自定义它，并通过Engine.create(element, options)将它作为engine.render.controller传递给引擎。
Stack Overflow用户
发布于 2017-11-02 05:39:11
正如@Martti Laine在评论中提到的那样，以下代码只会起作用：
Bodies.rectangle(0, 0, 100, 100, {
render: {
fillStyle: 'red',
strokeStyle: 'blue',
lineWidth: 3
}
});如果render.options.wireframes设置为false。
var render = Render.create({
element: document.body,
engine: engine,
options: {
width: window.innerWidth,
height: window.innerHeight,
wireframes: false // <-- important
}
});Stack Overflow用户
发布于 2019-02-10 22:51:04
因为没有人回答问题中关于
我正在尝试更改画布的背景颜色...
这部分是这样完成的：
const Engine = Matter.Engine,
Render = Matter.Render,
World = Matter.World,
Bodies = Matter.Bodies;
// create an engine
const engine = Engine.create();
const render = Render.create({
element: document.body,
engine,
options: {
width: some_width,
height: some_height,
wireframes: false,
background: 'rgb(255,0,0)' // or '#ff0000' or other valid color string
}
})```页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22686917
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号