文档章节

canvas 学习笔记

起什么name呢
 起什么name呢
发布于 2016/04/23 01:49
字数 709
阅读 93
收藏 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 弧度角 高中学的都还给老师了明天再复习下)

今天先到这里

 

 

 

 

 

 

 

 

 

© 著作权归作者所有

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

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

hushhw ⋅ 2017/12/19 ⋅ 0

《WebGL编程指南》学习笔记——2.使用元素

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

hushhw ⋅ 2017/12/16 ⋅ 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学习资源推荐 本周...

冷秋寒 ⋅ 2013/02/06 ⋅ 0

Android学习笔记进阶18之画图并保存图片到本地

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

迷途d书童 ⋅ 2012/03/05 ⋅ 0

Android自定义View之Canvas的Path方法和Paint的DrawText的方法

本篇文章记录了一些觉得还是很有意思的一些方法,文章底部有自定义View的干货推荐哦! Canvas画路径 初始化画笔工具 画线(三角形) 矩形路径 jx.png 好像并没有什么区别-_-|| 继续,依据路径写...

深情不及酒伴 ⋅ 2017/10/24 ⋅ 0

Android学习笔记09:Paint及Canvas的简单应用

Android学习笔记09:Paint及Canvas的简单应用   在Android中需要通过graphics类来显示2D图形。   graphics中包括了Canvas(画布)、Paint(画笔)、Color(颜色)、Bitmap(图像)等常用...

Carl_ ⋅ 2015/01/07 ⋅ 0

Android Bitmap和Canvas学习笔记

位图是我们开发中最常用的资源,毕竟一个漂亮的界面对用户是最有吸引力的。 1. 从资源中获取位图 可以使用BitmapDrawable或者BitmapFactory来获取资源中的位图。 当然,首先需要获取资源: ...

迷途d书童 ⋅ 2012/03/05 ⋅ 0

《WebGL编程指南》学习笔记——2.WebGL概述

上一节初步认识了WebGL,这一小节我们来开始学习使用< canvas >元素绘制二维图形 下小节我们正式开始学习如何在< canvas >中使用WebGL WebGL采用HTML5中新引入的元素,它定义了网页上的绘图区...

hushhw ⋅ 2017/12/16 ⋅ 0

[three.js]学习笔记

再此之前必须提一个sublime的插件,HTML-CSS-JS Prettify(注意插件需要node.js的安装 装完过后右键菜单Prettify code或者ctrl+shift+h,就会看到不再一团糟、格式干净的代码了。有人推荐TAG...

phala ⋅ 2016/04/10 ⋅ 0

HTML 5 学习笔记(入门)

这是之前做HTML 5的学习笔记,之后还会分享出一些其他的笔记。都是一些早期无知少年笔记,喜欢就看吧。不喜欢,扔了!! 可以将内容复制粘贴自己看,或者直接另存成HTML文件也可以。笔记是通...

bobo_lin ⋅ 2012/08/16 ⋅ 18

没有更多内容

加载失败,请刷新页面

加载更多

下一页

ORM——使用spring jpa data实现逻辑删除

前言 在业务中是忌讳物理删除数据的,数据的这个对于一个IT公司可以说是最核心的资产,如果删除直接就物理删除,无疑是对核心资产的不重视,可能扯的比较远,本文最主要是想通过spring jpa ...

alexzhu592 ⋅ 30分钟前 ⋅ 0

代码快速“检”“修”不是梦,阿里云MaxCompute Studio 2.9.0 新版本发布

摘要: 阿里云MaxCompute Studio 2.9.0 新版本发布,此次发布的新版本,在原有功能的基础上增加了新功能,分别是支持代码检查和快速修复;支持graph开发及调试。 近日,阿里云大数据计算服务...

猫耳m ⋅ 32分钟前 ⋅ 0

CDN caching

Incapsula应用感知CDN使用智能分析和频率分析来动态缓存内容,并最大限度地提高效率。确保可直接从RAM获取最常访问的资源,而不依赖于较慢的访问机制。 1、 静态内容缓存 Incapsula缓存静态内...

上树的熊 ⋅ 33分钟前 ⋅ 0

代码快速“检”“修”不是梦,阿里云MaxCompute Studio 2.9.0 新版本发布

摘要: 阿里云MaxCompute Studio 2.9.0 新版本发布,此次发布的新版本,在原有功能的基础上增加了新功能,分别是支持代码检查和快速修复;支持graph开发及调试。 近日,阿里云大数据计算服务...

阿里云云栖社区 ⋅ 37分钟前 ⋅ 0

密码协议(一)协议概述

区块链兄弟社区,区块链技术专业问答先行者,中国区块链技术爱好者聚集地 作者:于中阳 来源:区块链兄弟 原文链接:http://www.blockchainbrother.com/article/86 著权归作者所有。商业转载...

-区块链兄弟- ⋅ 41分钟前 ⋅ 0

vim基础-一般模式

vim编辑器是vi编辑器的升级版本,支持颜色显示。使用yum安装vim-enhanced包。 /etc下的配置文件使用vim编辑可显示颜色,/etc下相同文件拷贝到其他目录不显示颜色。 三种模式:一般模式,编辑...

ZHENG-JY ⋅ 42分钟前 ⋅ 0

spring boot

https://www.cnblogs.com/EasonJim/p/7609911.html

vshcxl ⋅ 46分钟前 ⋅ 0

数据库中常说的steal和force到底是什么?

时长在看一些database paper的时候看到steal和no-force的字样,深入了解了一下,发现我们平时关注的redo log个undo log都是有渊源的,什么时候需要redo log,什么时候需要undo log,什么时候...

黑客画家 ⋅ 50分钟前 ⋅ 0

Mahout的推荐系统

Mahout的推荐系统 什么是推荐系统 为什使用推荐系统 推荐系统中的算法 什么是推荐系统 为什么使用推荐系统?   促进厂商商品销售,帮助用户找到想要的商品   推荐系统无处不在,体现在生...

xiaomin0322 ⋅ 52分钟前 ⋅ 0

docker里没有安装基础软件包,比如Vim,netstat, ps

一,安装VIM apt-get update 二,安装netstat命令 说明没有安装netstat工具,而该工具在 net-tools 工具包内 apt-get install net-tools 在这个时候,主要是因为apt还在运行,不能同时开两个...

aust_niuroutan ⋅ 57分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部