html style属性api,HTML5新增Canvas标签及对应属性、API详解（基础一）

一、标签原型

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

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

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

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

二、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()

画边框

画圆代码片段：

var canvasID = document.getElementByIdx_x("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");

b、 画线

属性

值

功能描述

Translate

Canvas.translate(200,200)

重置坐标原点

lineWidth

Canvas. lineWidth=10;

设置线的宽度

moveTo ()

Canvas. moveTo (0,0);

开始画线的初始位置

lineTo ()

Canvas. lineTo (100,0);

画线结束点位置

画线代码片段：

var canvasID = document.getElementByIdx_x("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");

c、 画多边形

画三角形代码片段：

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

var canvasID = document.getElementByIdx_x("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");

d、 画文字

画文字代码片段：

var canvasID = document.getElementByIdx_x("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");

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

五、使用canvas标签绘制时钟

代码片段：

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

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

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

//画时钟的方法

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.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); //是表针根据系统当前时间转动起来

绘制结果如下图：