文档章节

canvas 学习笔记

起什么name呢
 起什么name呢
发布于 2016/04/23 01:49
字数 709
阅读 98
收藏 6

由于公司业务需要,要用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 弧度角 高中学的都还给老师了明天再复习下)

今天先到这里

 

 

 

 

 

 

 

 

 

© 著作权归作者所有

共有 人打赏支持
起什么name呢
粉丝 1
博文 39
码字总数 12406
作品 0
朝阳
高级程序员
《WebGL编程指南》学习笔记——3.在Canvas中使用WebGL

《WebGL编程指南》学习笔记——2.在Canvas中使用WebGL 上一节学习了使用< canvas >元素绘制二维图形,这一节里面我们在< canvas >中使用WebGL 下小节我们正式开始学习如何在< canvas >中使用...

hushhw
2017/12/19
0
0
《WebGL编程指南》学习笔记——2.使用元素

《WebGL编程指南》学习笔记——2.使用< canvas >元素 上一节初步认识了WebGL,这一小节我们来开始学习使用< canvas >元素绘制二维图形 WebGL编程指南学习笔记2使用 canvas 元素 下小节我们正...

hushhw
2017/12/16
0
0
JavaEE——HTML5绘画

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 绘画是HTML5的新功能,以前是没有的,有flash的...

凯哥学堂
2017/10/30
0
0
Windows8/Silverlight/WPF/WP7/HTML5周学习导读(1月28日-2月3日)

Windows8/Silverlight/WPF/WP7/HTML5周学习导读(1月28日-2月3日) 本周Windows 8开发学习资源更新 本周Silverlight学习资源更新 本周Windows Phone开发学习资源更新 本周WPF学习资源推荐 本周...

冷秋寒
06/29
0
0
Android学习笔记进阶18之画图并保存图片到本地

1、首先创建一个Bitmap图片,并指定大小; 2、在该图片上创建一个新的画布Canvas,然后在画布上绘制,并保存即可; 3、需要保存的目录File,注意如果写的目录如“/sdcard/song/”如果不存在的...

迷途d书童
2012/03/05
2.2K
0

没有更多内容

加载失败,请刷新页面

加载更多

用Golang做了一个命令行贪吃蛇游戏

用Golang做了一个命令行贪吃蛇游戏 项目介绍 项目链接:https://gitee.com/lwow2025/snake-go 最近看了一本做几个小项目的书,突然就想用Golang做一个命令行贪吃蛇,也没啥特殊原因。 软件架...

Mediv
18分钟前
0
0
storm的利用并行度提高处理速度的经验

在storm的流计算框架中,在数据量非常大或者计算逻辑比较复杂的情况下,可能会造成处理速度变慢的情况,最后反而不满足了系统的处理要求,因此这里讨论一下。本文的内容是我在storm的使用过程...

飓风2000
28分钟前
0
0
课程推荐|深入浅出区块链博主:全栈区块链开发者的4堂必修课(线上优惠)

Tiny熊从2017年开始更新“深入浅出区块链”博客,在第一篇文章中,关于如何系统学习区块链技术,他这样描述:“从事区块链开发也有很多方向,如:区块链应用开发人员、区块链架构师、底层核心...

HiBlock
40分钟前
0
0
激活win10 亲测有效

1.首先,我们先查看一下Win10正式专业版系统的激活状态: 点击桌面左下角的“Windows”按钮,从打开的扩展面板中依次点击“设置”-“更新和安全”,并切换到“激活”选项卡,在此就可以查看到...

可达鸭眉头一皱
41分钟前
0
0
SpringWind180926

SpringWind SpringWind项目代码学习笔记 /SpringWind/src/main/webapp/WEB-INF/views/login.html 第15行action="#springUrl('/account/login.html')"【为什么是#springUrl】 第4行<a class=......

颖伙虫
54分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部