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. vivado2015.4保存ila波形数据

    reference: https://www.cnblogs.com/pejoicen/p/d8b3c4f3aa29b8de7963893d4b99d361.html Vivado2015.4下,il ...

  2. spring Ioc容器之使用XML配置Bean

    1.项目截图 2.创建xml文件 3.打印机接口 package com.example.demo.computerTest; public interface Printer { void init ...

  3. 只有自身跟上时代，offer就会如期而至

    [官宣]只有自身跟上时代,offer就会如期而至 最近对求职者来说,似乎颇不太平,各种裁员扑面而来,许多企业(易车.滴滴等)相继官宣裁员信息,包括阿里缩减校招,百度减少社招等,都让人不禁打嗦.但我们华 ...

  4. 2017-10-22模拟赛T2 或(or.*)

    题面 [题目描述]你需要构造一个长度为 n 的数列 X,当中的数字范围从 0 到 2^30-1.除此之外你需要满足 m 个条件,第 i 个条件为 X[li]|X[li+1]|……|X[ri]=pi.| ...

  5. OO第四次作业

    一.论述测试与正确性论证的差异 我认为论述测试代表从理论的角度来进行运行正确性的判断,而正确性测试则是从实践的角度来看待程序的正确性问题.两者之间有着明显的差异. 正确性论证是仅仅从代码的逻辑结构方面 ...

  6. WCF分布式3-InstanceContext和ConcurrencyMode

    WCF中,如果将实现契约(接口)的服务配置默认为 InstanceContextMode = InstanceContextMode.Single, 也就是说这个服务对象,客户端调用这个对象的接口时, ...

  7. Galera Cluster——一种新型的高一致性MySQL集群架构

    原文链接:https://www.sohu.com/a/147032902_505779,最近被分配定位mysql的问题,学习下. 1. 何谓Galera Cluster 何谓Galera Clust ...

  8. github仓库主页介绍、用git管理本地仓库和github仓库、搭建网站

    github仓库主页介绍 名词解释: 工作区: 添加.编辑.修改文件等动作 暂存区: 暂存已经修改的文件,最后统一提交到git中 git(仓库): 最终确定的文件保存到仓库,成为一个新的版本,并且对他 ...

  9. PaperBye-一个可以自动改重的免费论文查重网站

    推荐一个自动降重的免费论文查重软件,可自动降低论文重复率,一边修改,一边查重,免费查重网址:https://www.paperbye.com

  10. pycharm介绍

      PyCharm是一种Python IDE(集成开发软件),带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具. 1.1 PyCharm主界面 PyCharm包含4个主要区分,分别为 ...