Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
</head>
<body>
    <!-- sketch.js v1.0 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sketch.js/1.0/sketch.min.js"></script>
    <script>
        var example = Sketch.create({
            // 參數設定[註1]
            fullscreen: true, // 滿版
            autostart: true, // 自動開始，否則需要透過`start`函式執行開始
            autoclear: true, // 每次繪畫前自動清除，否則需要透過`clear`函式執行清除
            autopause1: true, // 當失焦時，是否自動暫停動畫
            container: document.body, // 目標物件
            interval: 1, // 更新/繪圖的間隔
            globals: true, // 新增全域屬性至window
            retina: false, // 當裝置是retina時，調整尺寸維持最佳體驗
            type: Sketch.CANVAS, // 模式
            eventTarget: null // 設定滑鼠監聽物件
        });
        example.setup = function() {
             // 當初始化時，則執行此函式
            this.r = this.g = this.b = random( 100, 200 ) // 設定R、G、B三個變數
        }
        example.mousemove = function() {
             // 當滑鼠移動時，則執行此函式
             this.r = 255 * (this.mouse.x / this.width) 
             this.g = 255 * (this.mouse.y / this.height)
             this.b = 255 * abs(cos(PI * this.mouse.y / this.width))
        }
        example.draw =  function() {
            // 繪圖函式
            this.fillStyle = "rgb(" + Math.round( this.r ) + "," + Math.round( this.g ) + "," + Math.round( this.b ) + ")"; // 填滿矩形的顏色
            this.fillRect(0, 0, this.width, this.height) // 填滿矩形
        }
        </script>
    </body>
    </html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
hsuehmingfangpro
0viewers