角度制和弧度制瀏覽器
生活中一般是用角度度來理解的,代碼裏都是用弧度制來計算。函數
角度轉弧度:DEG_TO_RAD = Math.PI / 180this
弧度裝角度:RAD_TO_DEG = 180 / Math.PIspa
正弦:Math.sincode
波形:blog
y軸的值會在-1和1的區間波動,只要咱們指定一個範圍值,好比50,乘於這個範圍值就能獲得一個在50~-50間的波形。應用於代碼中,實現一個小球按正弦波運動的例子,設定相應的變量:seo
angle: 角度(即x軸的值)it
range: 範圍(半徑)io
speed: 角速度 (x變化的速度)function
var SinWaveMove = __class__(Ball, { __init__: function () { Ball.call(this) this.init() }, init: function () { // 設置球在瀏覽器的左中位置 this.y = stage.height / 2 this.angle = 0 this.speed = 0.01 this.range = 500 }, onenter: function () { this.x = Math.sin(this.angle) * this.range } })
餘弦:Math.cos
餘弦的波形效果其實也差很少,能夠本身實驗一下,把上面的Math.sin替換成Math.cos便可.
圓周運動
其實就是正統函數和餘弦函數配合使用,x軸的值用Math.sin算y軸的值用Math.cos算,共同的半徑,同一個角度值來算。小球作圓周運動的例子:
var CircularWave = __class__(Ball, { __init__: function () { Ball.call(this) this.init() }, init: function () { // 設置球在瀏覽器的中心位置 this.x = this.cx = stage.width / 2 this.y = this.cy = stage.height / 2 this.angle = 0 this.speed = 0.01 this.radius = 500 }, onenter: function () { this.x = Math.sin(this.angle) * this.radius + this.cx this.y = Math.cos(this.angle) * this.radius + this.cy } })
橢圓運動
實際上是圓周運動同樣,只是把x軸和y軸的半徑設置成不一樣大小的值就OK了,能夠本身試試。
反正切:Math.atan2
由於這個比較有用,用於計算出兩點間的偏移角度:angle = Math.atan2(y2 - y1, x2 - x1) // 這個獲得的結果是弧度制的。
一個箭頭指向鼠標的demo:
var Arrow = __class__(Sprite, { __init__: function (attr) { Sprite.call(this, attr) }, init: function () { this.x = stage.width / 2 this.y = stage.height / 2 }, draw: function (ctx) {
// 畫出一個紅色的箭頭 ctx.fillStyle = 'red' ctx.beginPath() ctx.moveTo(-50, -50) ctx.lineTo(0, -50) ctx.lineTo(0, -100) ctx.lineTo(50, 0) ctx.lineTo(0, 100) ctx.lineTo(0, 50) ctx.lineTo(-50, 50) ctx.lineTo(-50, -50) ctx.fill() } }) var arrow = new Arrow() stage.add(arrow) var RAD_TO_DEG = 180 / Math.PI document.body.onmouseover = function (e) { var rotate = Math.atan2(e.y - arrow.y, e.x - arrow.x) arrow.rotation = rotate * RAD_TO_DEG }