canvas 學習筆記

時間 2019-11-12

標籤 canvas 學習筆記简体版

原文原文鏈接

因爲公司業務須要，要用canvas，實現一些比較炫酷的效果，因此這段時間領導讓學canvas，正好我的想用canvas作個網站寵物，給之後本身的我的博客用，因此一箭雙鵰，就開始了。javascript

須要的基礎知識：css

（1）html5 css3 javascript 這三個裏面主要是要用js 我的以爲之前學的夠用，就不復習了，直接上手。html

（2）一些數學公式三角函數 sin cos神馬的重力 a=mv² 用到了再複習html5

記下今天要記住的點吧java

1. canvas的元素大小和繪圖面積大小，儘可能不要使用css修改canvas的元素大小，由於當css指定的元素大小和繪圖面積大小不一致時，瀏覽器會自動調整canvas的繪圖面積大小至與 css指定的canvas的元素大小一致，會致使和效果不同。css3

2. 性能調試工具chrome

chrome develope tools，jsperf.com javacript的性能調製工具canvas

canvas動畫相關瀏覽器

這是今天作的一個小案例 small clockjsp

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>canvas練習</title>
</head>
<style type="text/css">
body{
background:#dddddd;
}
#canvas_scene{
margin:10px;
padding:10px;
background:#ffffff;
border:thin inset#aaaaaa;
/*width:600px;*/
/*height:500px;*/
}
</style>
<body>
<canvas id="canvas_scene">
    你的瀏覽器不支持canvas
</canvas>
</body>
<!-- <script type="text/javascript" src="sample.js"></script> -->
<script type="text/javascript" src="./20160422p_1.js"></script>
</html>

var canvas = document.getElementById('canvas_scene');
// canvas.width  = 500;
// canvas.height = 300;
context = canvas.getContext('2d');
//設置一些配置常量
FONT_HEIGHT          = 10;
MARGIN                  = 100;
HAND_TRUNCATION      = canvas.width/25;
HOUR_HAND_TRUNCATION = canvas.width/10;
NUMERAL_SPACING      = 20;
RADIUS                  = canvas.width/2-MARGIN;
HAND_RADIUS          = RADIUS+NUMERAL_SPACING;

//畫圓
function drawCircle()
{
    context.beginPath();
    context.arc(canvas.width/2,canvas.height/2,RADIUS,0,Math.PI*2,true);
    context.stroke();
}

//畫時鐘上的數字
// function drawNumerals()
// {
    // var numerals = [1,2,3,4,5,6,7,8,9,10,11,12];
    // angle = 0;
    // numeralWith = 0;
    // numerals.forEach(function(numeral){
    //     angle = 0;
    //     numeralWidth = context.measureText(numeral).width;
    //     context.fillText(numeral, 
    //         canvas.width/2+Math.cos(angle)*(HAND_RADIUS)-numeralWidth/2,
    //         canvas.height/2+Math.sin(angle)*(HAND_RADIUS)+FONT_HEIGHT/3
    //         );
    // });
// }

function drawNumerals(){
    var numerals=[1,2,3,4,5,6,7,8,9,10,11,12],
    angle=0,
    numeralWidth=0;
    numerals.forEach(function(numeral){
        angle=Math.PI/6*(numeral-3);    //一個小時走多少角度(沒有理解)
        numeralWidth=context.measureText(numeral).width;    //字體寬度
        context.fillText(numeral,                        //繪製
        canvas.width/2+Math.cos(angle)*(HAND_RADIUS)-
        numeralWidth/2,
        canvas.height/2+Math.sin(angle)*(HAND_RADIUS)+
        FONT_HEIGHT/3);
    });
}


//畫表中心
function drawCenter()
{
    context.beginPath();
    context.arc(canvas.width/2,canvas.height/2,2,0,Math.PI*2,true);
    context.fill();
}

//畫指針(須要從新理解下)
function drawHand(loc,isHour)
{
    var angle = (Math.PI*2)*(loc/60)-Math.PI/2,
        handRadius = isHour?RADIUS-HAND_TRUNCATION-HOUR_HAND_TRUNCATION:RADIUS-HAND_TRUNCATION;
    context.moveTo(canvas.width/2,canvas.height/2);        
    context.lineTo(canvas.width/2+Math.cos(angle)*handRadius,
                    canvas.height/2+Math.sin(angle)*handRadius);
    context.stroke();
}
// function drawHand(loc, isHour) {
//    var angle = (Math.PI*2) * (loc/60) - Math.PI/2,
//        handRadius = isHour ? RADIUS - HAND_TRUNCATION-HOUR_HAND_TRUNCATION 
//                            : RADIUS - HAND_TRUNCATION;

//    context.moveTo(canvas.width/2, canvas.height/2);
//    context.lineTo(canvas.width/2  + Math.cos(angle)*handRadius, 
//                   canvas.height/2 + Math.sin(angle)*handRadius);
//    context.stroke();
// }


function drawHands()
{
    var date = new Date,
    hour = date.getHours();
    hour = hour>12?hour-12:hour;
    drawHand(hour*5+(date.getMinutes()/60)*5,true,0.5);
    drawHand(date.getMinutes(),false,0.5);
    drawHand(date.getSeconds(),false,0.2);
}

function drawClock()
{
    context.clearRect(0,0,canvas.width,canvas.height);
    drawCircle();
    drawCenter();
    drawHands();
    drawNumerals();
}

// drawNumerals();
// drawCircle();
// drawCenter();
// drawHand(12,0);
// drawHands();
context.font=FONT_HEIGHT+'px Arial';
loop=setInterval(drawClock,1000);

雖然是個簡單的案例可是還有些地方沒看懂，好比畫指針的地方，指針角度的計算過程（sin cos 弧度角高中學的都還給老師了明天再複習下）

今天先到這裏