知识说明:

HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting!

一、标签原型

<canvas width=”1000” height=”1000” id=”myCanvas”>

您的浏览器版本过低,不支持HTML5新增的canvas标签。

</canvas>

使用js获取该画布,并指定对象

<script>

Var canvasID = document.getElementById(“myCanvas”);

Var canvas = canvasID.getContext(“2d”);

</script>

二、canvas标签常见属性

属性

功能描述

width

pixels

设置canvas的宽度

height

pixels

设置canvas的高度

三、canvas标签的API整合

属性

功能描述

save()

Canvas.save();

保存当前画布环境状态

Restore()

Canvas.restore();

返回之前保存的画布的路径状态,与save()成对用

getContext()

Canvas.getContext();

返回一个对象,指出访问绘图功能必要的API

toDataURL()

Canvas.toDataURL();

返回canvas图像的url

四、canvas标签API的主要属性整合

a、 画圆

属性

功能描述

fillStyle

Canvas.fillStyle=”#f00”

设置或返回用于填充绘画的颜色、渐变或模式

strokeStyle

Canvas.strokeStyle=”#f0f”;

设置或返回用于笔触的颜色、渐变或模式

beginPath()

Canvas.beginPath();

开启画路径

closePath()

Canvas.closePath();

关闭画路径

Arc()

Canvas.arc(0,0,10,0,360,false);

参数:原点X、原点Y、原点起始弧度,原点结束弧度、顺时针/逆时针

画圆

Fill()

Canvas.fill()

填充

Stroke()

Canvas.stroke()

画边框

画圆代码片段:

<script>

var canvasID = document.getElementById("myCanvas");

var canvas = canvasID.getContext("2d");

//画圆方法

function drawArc(id)

{

canvas.beginPath();

canvas.lineWidth = 5;

canvas.fillStyle = "#00f";

canvas.strokeStyle = "#0f0";

canvas.arc(100, 100, 50, 0, 360, false);

canvas.fill();

canvas.stroke();

canvas.closePath();

}

drawArc("myCanvas");

</script>

b、 画线

属性

功能描述

Translate

Canvas.translate(200,200)

重置坐标原点

lineWidth

Canvas. lineWidth=10;

设置线的宽度

moveTo ()

Canvas. moveTo (0,0);

开始画线的初始位置

lineTo ()

Canvas. lineTo (100,0);

画线结束点位置

画线代码片段:

<script>

var canvasID = document.getElementById("myCanvas");

var canvas = canvasID.getContext("2d");

function drawLine(id)

{

canvas.save();

canvas.translate(150,100);

canvas.lineWidth= 10;

canvas.strokeStyle = "#999";

canvas.beginPath();

canvas.moveTo(0,0);

canvas.lineTo(100,0);

canvas.closePath();

canvas.stroke();

canvas.restore();

}

drawLine("myCanvas");

</script>

c、 画多边形

画三角形代码片段:

//画多边形,此处以三角形为例

<script>

var canvasID = document.getElementById("myCanvas");

var canvas = canvasID.getContext("2d");

function drawSanjiao(id)

{

canvas.save();

canvas.translate(250,40);

canvas.lineWidth = 3;

canvas.strokeStyle = "#0f0";

canvas.beginPath();

canvas.moveTo(0,0);

canvas.lineTo(0,120);

canvas.lineTo(100,60);

canvas.lineTo(0,0);

canvas.stroke();

canvas.closePath();

canvas.restore();

}

drawSanjiao("myCanvas");

</script>

d、 画文字

画文字代码片段:

<script>

var canvasID = document.getElementById("myCanvas");

var canvas = canvasID.getContext("2d");

function drawText(id)

{

canvas.save();

canvas.translate(100,300);

canvas.strokeStyle="#09";

canvas.fillStyle = "#879";

canvas.font = "normal 90px 微软雅黑";

canvas.strokeText("hello html5", 0, 0);

canvas.fillText("hello html5", 0, 0);

canvas.restore();

}

drawText("myCanvas");

</script>

以上a、b、c、d整合效果如下图:

五、使用canvas标签绘制时钟

代码片段:

<canvas width="1000" height="1000" id="clockCanvas">

您的浏览器版本太低,不支持显示时钟的canvas标签

</canvas>

<script>

var clockID = document.getElementById("clockCanvas");

var clock = clockID.getContext("2d");

/*步骤:画钟表整体思路步骤分析

1、使用canvas创建画布,并创建一个2d对象

2、使用function方法做计算

3、实例化Date()对象,通过该对象获取系统当前的时、分、秒

4、通过计算将24小时制转化为12小时制

5、画表盘

6、画刻度盘

7、画指针

8、使用setInterval(fun, time);设置动态

*/

//画时钟的方法

function drawClock(id)

{

//每次清空画布

clock.clearRect(0,0,1000,1000);

//获取系统当前时间(时 、分 、秒)

var now = new Date();  //实例化一个当前时间的对象,通过该对象获取系统当前时间

var sec = now.getSeconds();  //秒

var mins = now.getMinutes();  //分

var hours = now.getHours();    //时

//绘制文字,显示系统当前时间:

clock.save();

clock.translate(0,500);

clock.fillStyle = "#ff0";

clock.strokeStyle = "#eee";

clock.font = "bold 50px 微软雅黑";

clock.strokeText("系统当前时间为:"+hours+"时"+mins+"分"+sec+"秒", 100, 100);

clock.fillText("系统当前时间为:"+hours+"时"+mins+"分"+sec+"秒", 100, 100);

clock.restore();

//计算:满60分加一小时

hours = hours + mins/60;

//计算:将24小时制转化为12小时制

hours = hours>12?hours-12:hours;

//画表盘

clock.beginPath();

clock.lineWidth = 10;

clock.strokeStyle = "#ff00ff";

clock.arc(300, 300, 200, 0, 360, false);

clock.stroke();

clock.closePath();

//画刻度盘

//时刻度

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

{

clock.save();

//将起始点定位到圆心

clock.translate(300,300);

//设置刻度的样式

clock.lineWidth = 7;

clock.strokeStyle = "#999999";

//设置旋转角度

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

clock.beginPath();

clock.moveTo(0, -170);

clock.lineTo(0, -190);

/*clock.font = "normal 20px 宋体";

clock.textAlign = "left";

clock.textBaseLine = "top";

clock.strokeText(i, i*(-50)*Math.PI/180, -150);

clock.closePath();*/

//画刻度线

clock.stroke();

clock.restore();

}

//分刻度

for(var j = 0; j<60; j++)

{

clock.save();

//设置起始点坐标

clock.translate(300,300);

clock.lineWidth = 5;

clock.strokeStyle = "#999999";

//设置旋转角度

clock.rotate(j*6*Math.PI/180);

clock.beginPath();

clock.moveTo(0, -180);

clock.lineTo(0, -190);

clock.closePath();

clock.stroke();

clock.restore();

}

//时针

clock.save();

clock.translate(300,300);

clock.lineWidth = 7;

clock.strokeStyle = "#000000";

//设置小时的旋转角度,没转一次走30°

clock.rotate(hours*30*Math.PI/180);

clock.beginPath();

clock.moveTo(0,15);

clock.lineTo(0,-120);

clock.stroke();

clock.closePath();

clock.restore();

//分针

clock.save();

clock.translate(300, 300);

clock.rotate(mins*6*Math.PI/180);

clock.lineWidth = 5;

clock.strokeStyle = "#000";

clock.beginPath();

clock.moveTo(0,20);

clock.lineTo(0,-160);

clock.stroke();

clock.closePath();

clock.restore();

//秒针

clock.save();

clock.translate(300,300);

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

clock.lineWidth = 3;

clock.strokeStyle = "#f00";

clock.beginPath();

clock.moveTo(0, 25);

clock.lineTo(0,-165);

clock.stroke();

clock.closePath();

//秒针圆心处一个小圈

clock.fillStyle = "#999";

clock.strokeStyle = "#f00";

clock.beginPath();

clock.arc(0,0,6,0,360,false);

clock.fill();

clock.stroke();

clock.closePath();

//秒针顶部一个小圈

clock.beginPath();

clock.arc(0,-140,6,0,360,false);

clock.fill();

clock.stroke();

clock.closePath();

clock.restore();

}

drawClock();

setInterval(drawClock, 1000);  //是表针根据系统当前时间转动起来

</script>

绘制结果如下图:

HTML5新增Canvas标签及对应属性、API详解(基础一)的更多相关文章

  1. HTML5新增video标签及对应属性、API详解

    知识说明: 比不上很牛的前端开发人员,但自始至终明白“万丈高楼平地起”,基础最重要,初学HTML5,稳固基础第一步,把最基本的整理下来,留下自己学习的痕迹.HTML5新增的video标签,将其属性以及 ...

  2. html5的float属性超详解(display,position, float)(文本流)

    html5的float属性超详解(display,position, float)(文本流) 一.总结 1.文本流: 2.float和绝对定位都不占文本流的位置 3.普通流是默认定位方式,就是依次按照 ...

  3. canvas绘图API详解

    canvas绘图API详解 1.context的状态 矩阵变换属性 当前剪辑区域 context的其他状态属性: strokeStyle, fillStyle, globalAlpha, lineWi ...

  4. jqGrid APi 详解

    jqGrid APi 详解 jqGrid皮肤 从3.5版本开始,jqGrid完全支持jquery UI的theme.我们可以从http://jqueryui.com/themeroller/下载我们所 ...

  5. DOM API详解

    来源于:http://zxc0328.github.io/2016/01/23/learning-dom-part1/ https://zxc0328.github.io/2016/01/26/lea ...

  6. 如何把canvas元素作为网站背景总结详解

    如何把canvas元素作为网站背景总结详解 一.总结 一句话总结:最简单的做法是绝对定位并且z-index属性设置为负数. 1.如何把canvas元素作为网站背景的两种方法? a.设置层级(本例代码就 ...

  7. hibernate学习(2)——api详解对象

    1   Configuration 配置对象 /详解Configuration对象 public class Configuration_test { @Test //Configuration 用户 ...

  8. 百度地图API详解之事件机制,function“闭包”解决for循环和监听器冲突的问题:

    原文:百度地图API详解之事件机制,function"闭包"解决for循环和监听器冲突的问题: 百度地图API详解之事件机制 2011年07月26日 星期二 下午 04:06 和D ...

  9. Webdriver之API详解(1)

    说明 Webdriver API详解,基于python3,unittest框架,driver版本和浏览器自行选择. 本内容需要对python3的unittest框架有一个简单的了解,这里不再赘述,不了 ...

随机推荐

  1. Python之检查URL

    # -*- coding: utf-8 -*- import os,sys import time import sys import pycurl #URL="http://www.bai ...

  2. js !!条件判断或运算的作用

    今天看到一个判断语句非常奇怪: if(!!selected){} //为什么是双'!'号呢? 自己查了下资料终于明白了这其中的原理: 原来'!!'会将表达式转为Boolean类型的数据. 如果'!un ...

  3. android开源项目总汇

    http://www.cnblogs.com/wanqieddy/p/3709466.html

  4. sql server中如何查看执行效率不高的语句

    sql server中,如果想知道有哪些语句是执行效率不高的,应该如何查看呢?下面就将为您介绍sql server中如何查看执行效率不高的语句,供您参考.   在测量功能时,先以下命令清除sql se ...

  5. MySQL Workbench 6 不能删除数据等问题(“Error Code: 1175”) 和入门教程

    网络资料收集 当用MySQL Workbench进行数据库的批量更新时,执行一个语句会碰到以下错误提示: Error Code: 1175 You are using safe...without a ...

  6. centos7 docker mysql56

    yum -y install docker docker pull centos docker run --name=mysqltmp -i -t centos /bin/bash yum -y in ...

  7. 学的一点点ps

    从C语言的代码中解脱开始学ps,看到色彩鲜明的东西,心里只有那么爽.哈哈.只学习3天,虽然只是一些皮毛,可还是学到了一些以前不知道的东西.让我对ps多了很多兴趣,决定以后要自学更多的ps技能.要给图片 ...

  8. 【HDU5955】Guessing the Dice Roll/马尔科夫

    先从阿里机器学习算法岗网络笔试题说起:甲乙两人进行一个猜硬币的游戏.每个人有一个目标序列,由裁判来抛硬币.谁先得到裁判抛出的一串连续结果,谁赢. 甲的目标序列是正正正,乙的目标序列是反正正.那么如果裁 ...

  9. ubuntu 安装eclipse,adt,android sdk,离线

    1.安装jdk 环境变量 $ sudo gedit ~/.bashrc export JAVA_HOME=/usr/local/jdk1.8.0_65export JRE_HOME=${JAVA_HO ...

  10. GeoHash

    查找是我们经常会碰到的问题,以前我做过一个这样的算法,在有序的数列(80万条左右),这批数据是根据维度由小到大排序的,寻找已知数据的位置,并且所相应的运算,由于这个算法要在嵌入式系统中做,如果一次在内 ...