canvas 学习笔记
canvas 学习笔记
起什么name呢 发表于2年前
canvas 学习笔记
  • 发表于 2年前
  • 阅读 91
  • 收藏 6
  • 点赞 1
  • 评论 0

华为云·免费上云实践>>>   

由于公司业务需要,要用canvas,实现一些比较炫酷的效果,所以这段时间领导让学canvas,正好个人想用canvas做个网站宠物,给以后自己的个人博客用,所以两全其美,就开始了。

需要的基础知识:

(1)html5 css3 javascript 这三个里面主要是要用js 个人觉得以前学的够用,就不复习了,直接上手。

(2)一些数学公式 三角函数 sin cos神马的 重力 a=mv² 用到了再复习


记下今天要记住的点吧

1. canvas的元素大小和绘图面积大小,尽量不要使用css修改canvas的元素大小,因为当css指定的元素大小和绘图面积大小不一 致时,浏览器会自动调整canvas的绘图面积大小 至与 css指定的canvas的元素大小一致,会导致和效果不一样。

2. 性能调试工具

chrome develope tools,jsperf.com javacript的性能调制工具

canvas动画相关

 

这是今天做的一个小案例 small clock

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>


js

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

今天先到这里

 

 

 

 

 

 

 

 

 

共有 人打赏支持
粉丝 2
博文 27
码字总数 12406
×
起什么name呢
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: