前端基础：canvas概述

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概述的更多相关文章

Magento 架构基础知识概述
Megento 架构基础知识概述 Magento整合了面向对象的基于PHP的应用程序的核心架构原则.这些一般原则的综合讨论既有在线的,也有印刷形式.以下讨论主要关注这些主题如何直接应用于Magento ...
前端基础之JavaScript day51
前端基础之JavaScript JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中) ...
前端基础：CSS样式选择器
前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...
前端第三篇---前端基础之JavaScript
前端第三篇---前端基础之JavaScript 一.JavaScript概述二.JavaScript的基础三.词法分析四.JavaScript的内置对象和方法五.BOM对象六.DOM对象七 ...
web前端基础知识及快速入门指南
web前端基础知识及快速入门指南做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
html css 前端基础学习方法及经验分享
前言: 入园第一天,想分享一点儿前端基础html css 的学习方法和一些经验给热爱前端,但是不知道从哪儿开始,依旧有些迷茫的新手朋友们.当然,适合每个人的学习方式不同,以下所讲的仅供参考. 一.关于 ...
HTML+DIV+CSS+JSweb前端基础
HTML+DIV+CSS+JSweb前端基础 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1) dir: 文本的显示方向,默认是从左向右 (2 ...
前端基础面试题(JS部分)
1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...
前端基础之DOM和BOM
前端基础之DOM和BOM JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏 ...
tableview前端基础设计（初级版）
tableView前端基础设计实现的最终效果操作目的:熟悉纯代码编辑TableView和常用的相关控件SearchBar.NavigationBar.TabBar等,以及布局和基本功能的实现. 一 ...

随机推荐

1 实现添加功能 1.1 定义一个学员类（Student），在Student类中定义姓名、性别和年龄属性，定义有参数的构造方法来初始化所以的成员属性 1.2 创建学员类对象来存放学员信息，并且为每一个学生对象添加的相应的编号。并将学员类对象添加到Map<Integer,Student>集合中 1.3 添加完成后，显示所有已添加的学员姓名 1.4 限制年龄文本框只能输入正整数,否则的会采
学生类 package com.lanxi.demo1_3; public class Student { private String name; private String sex; priva ...
python入门之小栗子
1 点球小游戏: from random import choice score=[0,0]direction=['left','center','right'] def kick(): print ...
java跟oracle如何计算时间差
java计算时间差: //计算入职时间 SimpleDateFormat sf = new SimpleDateFormat("yyyy-MM-dd");String date = ...
快速比较 Kafka 与 Message Queue 的区别
https://hackernoon.com/a-super-quick-comparison-between-kafka-and-message-queues-e69742d855a8 A supe ...
java基础知识—数组
1.数组:是一个变量,存储相同数据类型的一组数据. 2.数据的优点:减少代码量.易查找. 3.数组的使用步骤: 1)声明数组:int scores []: 2)开辟空间:scores = new in ...
；html5斜体字
font-style:italic; italic|oblique|normal 依次倾斜,越来越邪:
小程序wx.chooseImage的坑
选择图片后可能重新执行onshow()和onhide(),可以在页面中添加锁变量,选择图片前获取,选择完释放,onshow中利用锁来中断执行
c#线程池ThreadPool实例详解
1. 如何查看线程池的最大线程数和最小线程数 static void Main(string[] args) { Console.WriteLine("----------线程池开始,线程I ...
利用toggle实现背包
1.先创建入如图所示界面 2.在图片下面创建一个选中状态图片 3.在normal图片添加toggle组件,将子物体拖动到graphic里
Graphics Class
System.Drawing 封装一个 GDI+ 绘图图面. 此类不能被继承. https://docs.microsoft.com/zh-cn/dotnet/api/system.drawing.g ...

前端基础：canvas概述

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

随机推荐

热门专题