首页
学习
活动
专区
圈层
工具
发布
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    p5.js 矩形rect绘制教程

    点赞 + 关注 + 收藏 = 学会了 用 p5.js 绘制矩形有个很方便的方法:react()。这个简单的函数能帮我们画出普通矩形、圆角矩形,甚至在 3D 模式下调整细节。...rect () 到底能做什么? rect() 是 p5.js 里专门用来画矩形的函数。...(50, 50, 200, 100, 30, 0, 0, 30); } 动态网格矩形 画布上有网格排列的矩形,颜色会随时间缓慢变化(从冷色调到暖色调流动) 鼠标移动时,矩形的圆角会跟着鼠标位置变化(鼠标越靠右...颜色变化(减慢流动速度,避免快速变色闪烁) const hue = (frameCount * 1 + i * 30 + j * 15) % 360; // 之前是*2,现在*1更慢...边框(和填充色协调,不刺眼) stroke(`hsla(${hue}, 70%, 40%, 0.9)`); strokeWeight(1); // 边框变细,减少视觉干扰 ​

    41110

    wxss学习系列《三》背景(Background)与颜色(Color),边框(Border)

    一、背景(Background)与颜色(Color) 一、背景:background。 设置对象的背景特性。...1.background-color:指定背景的颜色。取值:正常的颜色取值。 2.background-image:背景图片。...二、颜色:color:设置对象的文本颜色。 可使用颜色名,rgb,hex,rgba,hsl,hsla,transparent等等来设置。 ? opacity:设置对象的不透明度。...1.border-width:设置边框宽度:常用取值:medium:默认值,相当于3px。thin:1px。thick:5px。不可以为负值。 2.border-color:设置边框颜色。...border-top-width,border-top-style,border-top-color 分别设置 宽度,样式以及颜色 4.border-right:设置右边框。

    4K50

    从零开始学 Web 之 CSS3(二)颜色模式,文字阴影,盒模型,边框圆角,边框阴影

    一、颜色模式 颜色模式有两种: RGBA rgba(0,0,0,0.5); //黑色,透明度0.5 HSLA(颜色(0~360),饱和度(0%~100%),明度(0%~100%),透明度(0~1)) 红橙黄绿青蓝紫红...:颜色从 0~360 顺序,各占30度。...3、浏览器的兼容性 IE8 及以上版本支持该属性,Firefox 需要加上浏览器厂商前缀 -moz-,对于低版本的 IOS 和 Android 浏览器也需要加上 -webkit- 四、边框圆角 使用.../*添加边框圆角*/ /*1.设置一个值:四个角的圆角值都一样*/ border-radius: 10px; border-radius: 50%; /*2.设置两个值:第一个值控制左上/右下,第二个值控制右上...*分别是水平方向的偏移:左上,右上,右下,左下 ,垂直方向的偏移:左上,右上,右下,左下*/ border-radius: 100px 0px 0px 0px/20px 0px 0px 0px; 五、边框阴影

    2.3K30

    画布就是一切(一)— 画布编程的基本模式

    对于一个矩形,默认的情况下显示黑色边框,当鼠标悬浮在矩形上的时候,矩形的边框能够显示为红色,就像下图一样: 那么如何实现这个功能呢?...悬浮变色的场景下,需要的东西很简单: 矩形位置 矩形大小 矩形边框颜色 整理完成以后,我们还需要进行提炼。有的读者可能会说,上述整理的东西已经足够了,还需要提炼什么呢?...但对于矩形边框颜色是不是状态,则需要探讨。在我看来,应该属于渲染的范畴,不属于状态的范畴。为什么这么来理解呢?...-- 同级目录下的index.js --> js"> 同级目录下的index.js: // 同级目录的index.js...drawRect(ctx, rect) { // 暂存当前ctx的状态 ctx.save(); // 设置画笔颜色:黑色 ctx.strokeStyle = rect.hover ?

    1.5K20

    画布就是一切(一)— 画布编程的基本模式

    对于一个矩形,默认的情况下显示黑色边框,当鼠标悬浮在矩形上的时候,矩形的边框能够显示为红色,就像下图一样: 那么如何实现这个功能呢?...悬浮变色的场景下,需要的东西很简单: 矩形位置 矩形大小 矩形边框颜色 整理完成以后,我们还需要进行提炼。有的读者可能会说,上述整理的东西已经足够了,还需要提炼什么呢?...但对于矩形边框颜色是不是状态,则需要探讨。在我看来,应该属于渲染的范畴,不属于状态的范畴。为什么这么来理解呢?...-- 同级目录下的index.js --> js"> 同级目录下的index.js: // 同级目录的index.js...drawRect(ctx, rect) { // 暂存当前ctx的状态 ctx.save(); // 设置画笔颜色:黑色 ctx.strokeStyle = rect.hover ?

    1.4K10

    画布就是一切(一)— 画布编程的基本模式

    对于一个矩形,默认的情况下显示黑色边框,当鼠标悬浮在矩形上的时候,矩形的边框能够显示为红色,就像下图一样: 那么如何实现这个功能呢?...悬浮变色的场景下,需要的东西很简单: 矩形位置 矩形大小 矩形边框颜色 整理完成以后,我们还需要进行提炼。有的读者可能会说,上述整理的东西已经足够了,还需要提炼什么呢?...但对于矩形边框颜色是不是状态,则需要探讨。在我看来,应该属于渲染的范畴,不属于状态的范畴。为什么这么来理解呢?...-- 同级目录下的index.js --> js"> 同级目录下的index.js: // 同级目录的index.js...drawRect(ctx, rect) { // 暂存当前ctx的状态 ctx.save(); // 设置画笔颜色:黑色 ctx.strokeStyle = rect.hover ?

    1.2K20
    领券