HTML5新增Canvas标签及对应属性、API详解(基础一)
知识说明:
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详解(基础一)的更多相关文章
- HTML5新增video标签及对应属性、API详解
知识说明: 比不上很牛的前端开发人员,但自始至终明白“万丈高楼平地起”,基础最重要,初学HTML5,稳固基础第一步,把最基本的整理下来,留下自己学习的痕迹.HTML5新增的video标签,将其属性以及 ...
- html5的float属性超详解(display,position, float)(文本流)
html5的float属性超详解(display,position, float)(文本流) 一.总结 1.文本流: 2.float和绝对定位都不占文本流的位置 3.普通流是默认定位方式,就是依次按照 ...
- canvas绘图API详解
canvas绘图API详解 1.context的状态 矩阵变换属性 当前剪辑区域 context的其他状态属性: strokeStyle, fillStyle, globalAlpha, lineWi ...
- jqGrid APi 详解
jqGrid APi 详解 jqGrid皮肤 从3.5版本开始,jqGrid完全支持jquery UI的theme.我们可以从http://jqueryui.com/themeroller/下载我们所 ...
- DOM API详解
来源于:http://zxc0328.github.io/2016/01/23/learning-dom-part1/ https://zxc0328.github.io/2016/01/26/lea ...
- 如何把canvas元素作为网站背景总结详解
如何把canvas元素作为网站背景总结详解 一.总结 一句话总结:最简单的做法是绝对定位并且z-index属性设置为负数. 1.如何把canvas元素作为网站背景的两种方法? a.设置层级(本例代码就 ...
- hibernate学习(2)——api详解对象
1 Configuration 配置对象 /详解Configuration对象 public class Configuration_test { @Test //Configuration 用户 ...
- 百度地图API详解之事件机制,function“闭包”解决for循环和监听器冲突的问题:
原文:百度地图API详解之事件机制,function"闭包"解决for循环和监听器冲突的问题: 百度地图API详解之事件机制 2011年07月26日 星期二 下午 04:06 和D ...
- Webdriver之API详解(1)
说明 Webdriver API详解,基于python3,unittest框架,driver版本和浏览器自行选择. 本内容需要对python3的unittest框架有一个简单的了解,这里不再赘述,不了 ...
随机推荐
- Python之检查URL
# -*- coding: utf-8 -*- import os,sys import time import sys import pycurl #URL="http://www.bai ...
- js !!条件判断或运算的作用
今天看到一个判断语句非常奇怪: if(!!selected){} //为什么是双'!'号呢? 自己查了下资料终于明白了这其中的原理: 原来'!!'会将表达式转为Boolean类型的数据. 如果'!un ...
- android开源项目总汇
http://www.cnblogs.com/wanqieddy/p/3709466.html
- sql server中如何查看执行效率不高的语句
sql server中,如果想知道有哪些语句是执行效率不高的,应该如何查看呢?下面就将为您介绍sql server中如何查看执行效率不高的语句,供您参考. 在测量功能时,先以下命令清除sql se ...
- MySQL Workbench 6 不能删除数据等问题(“Error Code: 1175”) 和入门教程
网络资料收集 当用MySQL Workbench进行数据库的批量更新时,执行一个语句会碰到以下错误提示: Error Code: 1175 You are using safe...without a ...
- centos7 docker mysql56
yum -y install docker docker pull centos docker run --name=mysqltmp -i -t centos /bin/bash yum -y in ...
- 学的一点点ps
从C语言的代码中解脱开始学ps,看到色彩鲜明的东西,心里只有那么爽.哈哈.只学习3天,虽然只是一些皮毛,可还是学到了一些以前不知道的东西.让我对ps多了很多兴趣,决定以后要自学更多的ps技能.要给图片 ...
- 【HDU5955】Guessing the Dice Roll/马尔科夫
先从阿里机器学习算法岗网络笔试题说起:甲乙两人进行一个猜硬币的游戏.每个人有一个目标序列,由裁判来抛硬币.谁先得到裁判抛出的一串连续结果,谁赢. 甲的目标序列是正正正,乙的目标序列是反正正.那么如果裁 ...
- ubuntu 安装eclipse,adt,android sdk,离线
1.安装jdk 环境变量 $ sudo gedit ~/.bashrc export JAVA_HOME=/usr/local/jdk1.8.0_65export JRE_HOME=${JAVA_HO ...
- GeoHash
查找是我们经常会碰到的问题,以前我做过一个这样的算法,在有序的数列(80万条左右),这批数据是根据维度由小到大排序的,寻找已知数据的位置,并且所相应的运算,由于这个算法要在嵌入式系统中做,如果一次在内 ...