用canvas画布绘制立方体框架

红影

马黑黑 发表于 2024-4-30 20:47
几何好的，这么画应该不在话下吧

这个去画真的不难。我去试试给它转个方向。。。

红影

马黑黑 发表于 2024-4-30 21:00
加颜色要加对。box 是 Box 的实例化，那么，box.color = 'red' 就是定义了颜色了。

我还以为因为constructor(x,y,width,color)，然后 var box = new Box(50.5, 150.5, 200, 颜色);就可以了，原来不是的

红影

把x+全变成x- ，就换成另一边了

                               
登录/注册后可看大图

马黑黑

红影 发表于 2024-5-1 00:02
把x+全变成x- ，就换成另一边了

对，这是另一个朝向

马黑黑

红影 发表于 2024-4-30 23:47
我还以为因为constructor(x,y,width,color)，然后 var box = new Box(50.5, 150.5, 200, 颜色);就可以了 ...

颜色你要加对，该参数是字串参数，颜色要用小角引号，例如：
    var box = new Box(50.5, 150.2, 200, 'red');

并在类里的 drawPanel(context) 方法设置 strokeStyle（描边样式），放在第一行：

    ctx.strokeStyle = this.color;

马黑黑

红影 发表于 2024-4-30 23:45
这个去画真的不难。我去试试给它转个方向。。。

红影

马黑黑 发表于 2024-5-1 07:38
对，这是另一个朝向

这比第二种方式容易懂，完全一条条地画线。

红影

马黑黑 发表于 2024-5-1 07:39
颜色你要加对，该参数是字串参数，颜色要用小角引号，例如：
    var box = new Box(50.5, 150.2, 200,  ...

字串参数需要用到小角引号，这黑黑讲了不止一次了，结果用的时候还是忘记了，不好意思啊
嗯，还需要设置描边样式。谢谢黑黑，学习了

红影

马黑黑 发表于 2024-5-1 07:39

动手试试可以记得更牢点

马黑黑

红影 发表于 2024-5-1 08:54
动手试试可以记得更牢点

这个自然

马黑黑

红影 发表于 2024-5-1 08:53
字串参数需要用到小角引号，这黑黑讲了不止一次了，结果用的时候还是忘记了，不好意思啊
嗯， ...

这个演示，主要是画框架，所以代码并不齐全

马黑黑

红影 发表于 2024-5-1 08:50
这比第二种方式容易懂，完全一条条地画线。

我看多 three.js 的部分源码，它绘制立体对象都是一面一面画的，能用矩形画面就用矩形，不能就用画多边形的方式画面，大量的 moveTo 和 lineTo，这是实实在在的画法，牢靠

红影

马黑黑 发表于 2024-5-1 09:05
这个自然

一般情况下总想着动手试试呢。

红影

马黑黑 发表于 2024-5-1 09:06
这个演示，主要是画框架，所以代码并不齐全

嗯嗯，侧重点不同。

红影

马黑黑 发表于 2024-5-1 09:08
我看多 three.js 的部分源码，它绘制立体对象都是一面一面画的，能用矩形画面就用矩形，不能就用画多边形 ...

嗯嗯，这样一笔一笔画出来的，最直接了。

马黑黑

红影 发表于 2024-5-1 09:58
嗯嗯，这样一笔一笔画出来的，最直接了。

我也看过 JQuery 的部分代码，这个JQuery论坛程序里用到它的，它做啥也都是老老实实的，比如测量浏览器的滚动条的厚度，它这么做：建立一对父子元素，让父元素能随子元素尺寸自动改变大小，再将子元素变为比父元素原始尺寸大很多，同时手机父元素的变化尺寸，将变化后的尺寸减去原始尺寸得出滚动条的厚度，最后销毁这对父子元素。

马黑黑

红影 发表于 2024-5-1 09:57
嗯嗯，侧重点不同。

主要是将原理弄出来

马黑黑

红影 发表于 2024-5-1 09:56
一般情况下总想着动手试试呢。

上进心强

红影

马黑黑 发表于 2024-5-1 11:04
我也看过 JQuery 的部分代码，这个JQuery论坛程序里用到它的，它做啥也都是老老实实的，比如测量浏览器的 ...

这么仔细啊，太赞了

红影

马黑黑 发表于 2024-5-1 11:05
主要是将原理弄出来

能学会原理才是关键。