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 弧度角高中学的都还给老师了明天再复习下）

今天先到这里