1：并不是所有的浏览器都支持canvas,若是不支持则浏览器会弹出

<canvas>Update your browser to enjoy canvas</canvas>

浏览器不支持，也不能使用可替换的文字。

2：绘制一个时钟代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <canvas id = "clock" width = "500" height ="500" style = "background:gray">

        你的浏览器太老了不支持canvs标签，看不到时钟！

        </canvas>

</body>

<script>

    var clock = document.getElementById("clock");

    var cxt = clock.getContext('2d');

    var clock = document.getElementById('clock');

    var cxt = clock.getContext('2d');

        function drawClock() {

            //清屏,可以看到针在移动

            cxt.clearRect(0,0,500,500);

            //得到系统当前的时间

            var now = new Date();

            //得到时分秒

            var sec = now.getSeconds();

            var min = now.getMinutes();

            var hour = now.getHours();

            //小时是浮点数 类型要得到时针准确的位置，必须将当前的分钟也转换为//小时

            hour = hour+min/60;

            //将24小时转化为12小时制

            hour =(hour>12)?(hour-12):hour;

            //绘制表盘

            cxt.lineWidth=10;

            cxt.strokeStyle = "blue";

            cxt.beginPath();

            cxt.arc(250,250,200,0,360,false);

            cxt.stroke();

            cxt.closePath();

            //绘制刻度

                //时刻度

                for(var i = 0; i < 12; i++) {

                    cxt.save();

                    //设置时针的粗细

                    cxt.lineWidth = 7;

                    //设置时针的颜色

                    cxt.strokeStyle="#000";

                    //设置异次元空间的0,0点

                    cxt.translate(250,250);

                    //再设置旋转角度

                    cxt.rotate(i*30*Math.PI/180);

                    //开始绘制

                    cxt.beginPath();

                    cxt.moveTo(0,-170);

                    cxt.lineTo(0,-190);

                    cxt.stroke();

                    cxt.closePath();

                    cxt.restore();

                }

                //分刻度

                for(var i = 0; i < 60; i++) {

                    cxt.save();

                    //设置分刻度的粗细

                    cxt.lineWidth = 5;

                    //设置分刻度的颜色

                    cxt.strokeStyle = "#123";

                    //设置或者重置画布的0,0点

                    cxt.translate(250,250);

                    //设置旋转的角度

                    cxt.rotate(i*6*Math.PI/180);

                    //开始绘制

                    cxt.beginPath();

                    cxt.moveTo(0,-180);

                    cxt.lineTo(0,-190);

                    cxt.stroke();

                    cxt.closePath();

                    cxt.restore();

                }

            //时针

                cxt.save();

                //设置时针风格

                cxt.lineWidth = 7;

                //设置时针的颜色

                cxt.strokeStyle = "#000" ;

                //设置异次元空间的0,0点

                cxt.translate(250,250);

                //设置旋转的角度

                cxt.rotate(hour*30*Math.PI/180);

                //开始绘制

                cxt.beginPath();

                cxt.moveTo(0,-140);

                cxt.lineTo(0,10);

                cxt.stroke();

                cxt.closePath();

                cxt.restore();

            //分针

                cxt.save();

                //设置分针的风格

                cxt.lineWidth = 5;

                cxt.strokeStyle = "#000";

                //设置异次元空间分针画布的圆心

                cxt.translate(250,250);

                //设置旋转角度

                cxt.rotate(min*6*Math.PI/180);

                //开始绘制

                cxt.beginPath();

                cxt.moveTo(0,-160);

                cxt.lineTo(0,15);

                cxt.stroke();

                cxt.closePath();

                cxt.restore();

            //秒针

                cxt.save();

                //设置秒针的风格

                cxt.lineWidth = 3;

                cxt.strokeStyle = '#000';

                //设置异次元分针画布的圆心

                cxt.translate(250,250);

                //设置旋转角度

                cxt.rotate(sec*6*Math.PI/180);

                //绘制秒针

                cxt.beginPath();

                cxt.moveTo(0,-170);

                cxt.lineTo(0,20);

                cxt.stroke();

                cxt.closePath();

                //画出时针，分针，秒针的交叉点

                cxt.beginPath();

                cxt.arc(0,0,5,0,360,false);

                //设置填充样式

                cxt.fillStyle = "gray";

                cxt.fill();

                //设置笔触样式(秒针已设置)

                cxt.stroke();

                cxt.closePath();

                //设置秒针前段的小圆点

                cxt.beginPath();

                cxt.arc(0,-150,5,0,360,false);

                //设置填充样式

                cxt.fillStyle="gray";

                cxt.fill();

                //设置笔触样式(秒针已设置)

                cxt.stroke();

                cxt.closePath();

                cxt.restore();

        }

        //使用setInterval(方法名，每隔多少毫秒重绘一下）每隔一段时间重新绘制，看到动的效果

        drawClock();  //刷新不出现延迟

        setInterval(drawClock,1000);

</script>

</html>

前端基础：canvas概述的更多相关文章

  1. Magento 架构基础知识概述

    Megento 架构基础知识概述 Magento整合了面向对象的基于PHP的应用程序的核心架构原则.这些一般原则的综合讨论既有在线的,也有印刷形式.以下讨论主要关注这些主题如何直接应用于Magento ...

  2. 前端基础之JavaScript day51

    前端基础之JavaScript   JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中) ...

  3. 前端基础：CSS样式选择器

    前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...

  4. 前端第三篇---前端基础之JavaScript

    前端第三篇---前端基础之JavaScript 一.JavaScript概述 二.JavaScript的基础 三.词法分析 四.JavaScript的内置对象和方法 五.BOM对象 六.DOM对象 七 ...

  5. web前端基础知识及快速入门指南

    web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...

  6. html css 前端基础 学习方法及经验分享

    前言: 入园第一天,想分享一点儿前端基础html css 的学习方法和一些经验给热爱前端,但是不知道从哪儿开始,依旧有些迷茫的新手朋友们.当然,适合每个人的学习方式不同,以下所讲的仅供参考. 一.关于 ...

  7. HTML+DIV+CSS+JSweb前端基础

    HTML+DIV+CSS+JSweb前端基础 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1)  dir: 文本的显示方向,默认是从左向右 (2 ...

  8. 前端基础面试题(JS部分)

    1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...

  9. 前端基础之DOM和BOM

    前端基础之DOM和BOM JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏 ...

  10. tableview前端基础设计（初级版）

    tableView前端基础设计 实现的最终效果 操作目的:熟悉纯代码编辑TableView和常用的相关控件SearchBar.NavigationBar.TabBar等,以及布局和基本功能的实现. 一 ...

随机推荐

  1. uboot使用笔记

    一.从最基础的uboot开始 首先是打算直接用程序把已有的镜像烧写进去sd卡里面,但是问题来了,烧写不进去 原因: 可能是windows 7的某些版本和win⑩的系统为了保护磁盘,设定了保护等级,直接 ...

  2. 手动增加swap空间

           在日常工作中,swap没有必要搞那么大的空间,因为现在好多服务器都使用了ssd硬盘,这些硬盘还是比较贵的.如果服务器内存是128G,swap空间还设置成内存的两倍的话,那岂不是很明显是很 ...

  3. FZU-Problem 2294 Uint47 calculator

    题目链接:http://acm.fzu.edu.cn/problem.php?pid=2294 题意:按照所给负号进行赋值.加.减乘.除和取余的操作. 解题思路:用map来存储字符串与值之间的对应关系 ...

  4. Oracle学习笔记之触发器

    触发器 触发器(trigger)是一些过程,与表关系密切,用于保护表中的数据,当一个基表被修改(INSERT.UPDATE或DELETE)时,触发器自动执行,例如通过触发器可实现多个表间数据的一致性和 ...

  5. 模拟post/get请求 类似于google的postman

    下载地址:https://www.getpostman.com/apps

  6. matlab绘图与可视化

    1.设置图形对象属性值 set(h,'属性名称','属性值') >> subplot(,,); h1=line([ ],[ ]); text(,0.5,'unchange'); subpl ...

  7. position的四个属性值

    1.relative2.absolute3.fixed4.static下面分别讲述这四个属性. <div id="parent"> <div id="s ...

  8. Windows 7 改造

    1.界面改造 1.1 软件 Wallpaper Engine 收费(18￥) 动态桌面,通过steam安装,使用steam中的创意工坊下载内容 最好使用集成显卡运行,单显卡方案容易桌面异常刷新 Clo ...

  9. 微信小程序实际开发中学习

    三个概念 微信:就是一个聊天工具 微信公众号:企业或个人用于管理其粉丝/用户的应用(类似于APP) 微信小程序:不需要下载安装直接可以使用的软件/应用/APP 小程序与公众号的区别: 定位不同(小程序 ...

  10. 导入PrefixHeader.pch 报错UNknow The type "NSString"，等基础类

    进入到项目,在Buid Settings收索Compile Source 把Compile Source As 改成Objective-C问题即可解决.