Javascript Canvas Load Image with Cross Origin

Canvas Usage

html canvas 簡單來說就是個 image,只是它可以使用 Javascript 來 render 你所想要的樣子,所以能操作的東西十分的多,可以拿來做動畫或是遊戲等等的,有其他的套件輔助會比較方便。

1
2
3
4
5
6
7
8
9
10
11
12
// 建立 canvas
// context 暫時沒有用到
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

// 設定 canvas 的大小,就像是一張圖片的大小是 800 x 400
canvas.width = 800;
canvas.height = 400;

// css 裡的 style,用來縮放,還有很多有的沒的......
canvas.style.width = '400px';
canvas.style.height = '300px';

Load Image From Url

用 Javascript Image 物件來建立圖片。

1
2
3
4
5
var img = new Image();
img.onload = function(){
// 完整載入圖片之後才會執行這一段
};
img.src = 'http://i.imgur.com/ImageHere';

閱讀全文

Sass 絕對置中 水平置中 垂直置中

絕對置中 absolute center

顧名思義就是水平置中加上垂直置中,讓內層的 div 會在外層的 div 的正中間。

Html

1
2
3
4
<div class='outer'>
<div class='inner'>
</div>
</div>

Scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.outer {
position: relative;

.inner {
position: absolute;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}

.outer {
width: 500px;
height: 500px;
background-color: rgba(0,0,0,.2);
}

.inner {
width: 100px;
height: 100px;
background-color: rgba(0,0,0,.2);
}

任意註解掉 top left bottom right 的參數,可以將內層的 div 對齊在外層的九個位置上,即可解決水平置中與垂直置中的問題。

閱讀全文

Sass 圓形階層漸層

Circle Gradient

Sass

參數說明:

  • shift: 從中心點移動多少位置,如果是 120px 則會從上一層的 div 左上角的原點,往右邊且往下個移 120px
  • step: 多少 pixel 換另一個顏色。
  • colors: 每一層的顏色,由內到外排序。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$shift: 120px;
$step: 30px;
$colors: ( #fbffa0 #cfff76 #a2e27a #4ab9aa #2c678d #07171f );

@for $i from 0 to length($colors) {
$color: unquote(nth($colors, $i + 1));

.layer-#{$i} {
position: absolute;
background: transparent;

border-radius: ($i + 1) * $step;
border: $step solid $color;
padding: 0px;

top: $shift - ($i + 1) * $step;
left: $shift - ($i + 1) * $step;
width: 2 * $i * $step;
height: 2 * $i * $step;
}
}

閱讀全文

Ruby OptionParser Usage

OptionParser

這個東西在 python 應該是 setup script,而在 ruby 不知道叫什麼 google 了老半天終於被我找到了。用法上很簡單大概看 ruby doc 的範例就會使用了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
require 'optparse'
require 'optparse/time'

options = {}
OptionParser.new do |opts|
opts.banner = "Usage: example.rb [options]"

opts.on("-v", "--[no-]verbose", "Run verbosely") do |v|
options[:verbose] = v
end

# 傳入參數
opts.on("-nNAME", "--name=NAME", "pass NAME arg with assignment") do |v|
options[:verbose] = v
end

# 傳入參數
opts.on("-r", "--require LIB", "pass LIB arg") do |v|
options[:verbose] = v
end

# 檢查型態
opts.on("-t", "--time [TIME]", Time, "pass TIME arg and check type") do |v|
options[:verbose] = v
end
end.parse!

p options
p ARGV

閱讀全文

Ruby 使用 Enumerable 和 Comparable

Enumerable

要使用 Enumerable Module 時,只需要兩個步驟:首先 include Enumerable Module,然後在定義 each 方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class Book
include Enumerable

attr_accessor :tags

def each
@tags.each do |tag|
yield tag
end
end
end

books = Books.new
books.count

這麼做的好處是,這樣就能使用所有 Enumerable Module 裡的 methods。

閱讀全文

Ruby 使用 attr accessor reader writer

attr

假設我們有一個 Book 的 class,裡面有他的參數名稱 name,然後想要對他存取參數的時候,會像這樣寫

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class Book
@name = nil
def name
@name
end
def name=(name)
@name = name
end
# ....
end

book = Book.new
book.name # => nil
book.name = 'Cat'
book.name # => 'Cat'

閱讀全文

Ruby 建立不存在的目錄 與 TempFile 的路徑

Root Path

執行 ruby 程式的當前位置

1
2
Dir.pwd
# => "/Users/akii"

Exec File

執行 ruby 程式的檔案

1
2
__FILE__
# => "test.rb"

Create Dir If Not Exists

如果當前目錄下不存在 tmp 的資料夾,則創立一個。

1
2
tmpdir = "./tmp"
FileUtils.mkdir_p(tmpdir) unless File.exists?(tmpdir)

閱讀全文

Sass 整理一些常用的方法

Sass 整理

每次都要找實在是有點浪費時間,不如乾脆一次整理完。

If … Else …

1
2
3
4
5
6
7
8
9
10
$boolean: true !default;

div {
@if( $boolean ){
display: block;
}
@else {
display: none;
}
}

For

1
2
3
4
5
@for $i from 1 through 5 {
.wd-#{$i} {
width: #{$i * 20%};
}
}

閱讀全文

Ruby on Rails Assets Pipeline 的使用方式

Assets Pipeline

config/initializers/assets.rb 中把 assets 加入 precompile 的路徑,不建議使用 *.css *.js 加入所有的東西,因為會將一些有的沒的或是不需要的東西一起編譯進去。

assets pipeline 的主要好處就是把所有的 css 包成一個檔案,漸少 request 的數量,像是 application.css 會載入所有被 require 的檔案,最後只需要傳送一個 css 就行了,同理 javascript 也是如此。

Layout

看不懂在說什麼,直接看例子比較快。

假設現在我們的 layout 裡面有兩個不同的頁面 admin.html.erb 跟 user.html.erb,要分別讓他們使用不同的 css js。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
app
├--assets
│ ├--javascripts
│ │ ├--admin.js
│ │ ├--user.js
│ │ └--...
│ └--stylesheets
│ ├--admin.scss
│ ├--user.scss
│ └--...
└--view
└--layout
├--admin.html.erb
└--user.html.erb

但為了減少請求的數量,我們讓一個 layout 只需要一個 css 和一個 js,在 layout 中的話會像這樣:

1
2
3
4
5
6
7
# app/views/layouts/admin.html.erb
<%= stylesheet_link_tag 'admin', media: 'all' %>
<%= javascript_include_tag 'admin' %>

# app/views/layouts/user.html.erb
<%= stylesheet_link_tag 'user', media: 'all' %>
<%= javascript_include_tag 'user' %>

如果使用 admin 的 layout 就會載入 admin.css admin.js

如果使用 user 的 layout 就會載入 user.css user.js

閱讀全文

Ruby on Rails 在 production 環境下跑 rails 5 專案

Production Mode

資料庫 Migrate

migrate production 環境下的資料庫,至於設定檔就不在這邊多說了。

1
RAILS_ENV=production rake db:migrate

產生 Secret Key

config/secret.yml 這個檔案裡面需要 production 環境的 secret key。

1
2
3
# config/secret.yml
production:
secret_key_base: <%= ENV["SECRET_KEY_BASE"] %>

用終端機產生 secret key,然後放置環境變數中。

1
2
3
4
5
# 產生 secret key
rake secret

# 將剛剛產生出來的 secret key 放入環境變數中
export SECRET_KEY_BASE=$(rake secret)

閱讀全文