canvas 学习笔记
由于公司业务需要，要用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 弧度角 高中学的都还给老师了明天再复习下）
今天先到这里