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. ubuntu 谷歌浏览器打开时需要输入密码来解锁密码环

    问题: ubuntu14.04, 设置系统自动登陆账户,但每次开机打开 google chromium 浏览器,会要求输入一次密码,来解锁登录密钥环.很麻烦. 解锁登录密钥环:输入密码以解锁您的登录密 ...

  2. uboot使用笔记

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

  3. MySQL data sync to Oracle with OGG(Remote Delivery)

    MySQL to Oracle with OGG 1. Install MySQL: yum install mysql-community-server [root@localhost ~]#  y ...

  4. [Deep Learning] mini-batch

    转自 http://hp.stuhome.net/index.php/2016/09/20/tensorflow_batch_minibatch/ 深度学习的优化算法,说白了就是梯度下降.每次的参数更 ...

  5. POST 调用 301 Moved Permanently 问题

    如上测试了2种,第一个post访问接口https能正常返回,第二个post访问接口http时301 Moved Permanently出现永久重定向问题,经检查发现服务器nginx对80端口做了重定向 ...

  6. jmeter的学习路线

  7. 2018-2019-2 《网络对抗技术》Exp5 MSF基础应用 20165326

    Exp5 MSF基础应用 实践内容 主动攻击实践 ms17_010_enternalblue 靶机:win7 x64成功 针对浏览器的攻击 ms14_064_ole_code_execution 靶机 ...

  8. Qt终结者之粒子系统

    前言 粒子系统用于模拟一些特定的模糊效果,如爆炸.烟火.雪花.水流等.使用传统的渲染技术实现粒子效果比较困难,但是使用QML粒子系统能十分方便的实现各种粒子效果,使你的界面更加炫酷,动感. QML中的 ...

  9. TP5 数据库迁移工具 migrate 教程

    第一步: 安装compose,不赘述,安装详情可百度或查看https://pkg.phpcomposer.com/#how-to-install-composer 第二步: 通过 composer   ...

  10. QRCode.js生成二维码

    QRCode的GitHub地址: https://github.com/KeeeX/qrcodejs 该版本解决了主版本(https://github.com/davidshimjs/qrcodejs ...