html5 斜边,html5 之 Canvas

canvas 基本概念

1.canvas只是一个容器(画布)，我们可以规定他的大小

当浏览器不支持canvas, 这里才会显示。

2.canvas必须使用脚本来绘画

// 首先，找到canvas

var c = document.getElementById('myCanvas')

// 然后，创建 context 对象(getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法)

var ctx = c.getContext("2d")

3.浏览器支持

// 通过js来判断

var c = document.getElementById('myCanvas')

if(c.getContext('2d')) {

var ctx = c.getContext('2d')

} else {

alert('请您升级浏览器')

}

画矩形

// 设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000(黑色)。

ctx.fillStyle="#FF0000";

// fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

ctx.fillRect(0,0,150,75);

直线

// 直线开始坐标

ctx.moveTo(0,0);

// 结束坐标

ctx.lineTo(200,100);

// 使用 stroke() 方法来绘制线条

ctx.stroke();

画圆

// 开始

ctx.beginPath();

// 起始x,y坐标 半径 开始角度和结束角度(弧度)

ctx.arc(95,50,40,0,2*Math.PI);

// 使用 stroke() 方法来绘制

ctx.stroke();

文本

// font 定义字体

ctx.font="30px Arial";

// 文本 和 位置(x, y)maxWidth(最大宽度，非必选)

ctx.fillText("Hello World",10,50);

图片

var img=new Image()

img.src="http://www.w3school.com.cn/i/ct_html5_canvas_image.gif"

ctx.drawImage(img,0,0);

渐变色

var grd = cxt.createLinearGradient(0, 0, 175, 50);

grd.addColorStop(0, "#FF0000");

grd.addColorStop(1, "#00FF00");

cxt.fillStyle = grd;

cxt.fillRect(0, 0, 175, 50);

CANVAS时钟

首先要明白几个基本概念

// 几何概念

sin a = 对边/斜边

cos a = 临边/斜边

// js的sin(a)

// 这里的a是弧度 不是几何里面的角度 需要换算成弧度

圆周长 = 2πr

1度所对应的弧长 = 2πr/360

1弧度 = 2π/360

Math.sin(a)

时钟代码

*{

margin: 0;

padding: 0;

}

div{

text-align: center;

margin-top:100px ;

}

#clock{

border: 1px solid #ccc;

}

var dom = document.getElementById('clock');

var ctx = dom.getContext('2d');

var width = ctx.canvas.width;

var height = ctx.canvas.height;

var r = width/2

// 定义背景圆

function drawBackground() {

// 保存当前的状态 不然下面定义的圆心 会在最后错位

ctx.save()

// 重新定义圆心

ctx.translate(r, r);

// 开始路径

ctx.beginPath()

// 画最外面的粗圆

ctx.lineWidth = 10

ctx.arc(0, 0, r-ctx.lineWidth/2, 0, 2*Math.PI, false)

ctx.stroke()

// 小时数 0度开始

ctx.font="18px Arial";

ctx.textAlign = 'center';

ctx.textBaseline="middle";

var hourNumbers = [3,4,5,6,7,8,9,10,11,12,1,2];

hourNumbers.forEach(function(num, i) {

var rad = 2*Math.PI/12 * i;

var x = Math.cos(rad)*(r - 30);

var y = Math.sin(rad)*(r - 30);

ctx.fillText(num, x, y)

})

// 画60个远点

for(var i=0; i<60; i++) {

var rad = 2*Math.PI/60 * i;

var x = Math.cos(rad)*(r-18);

var y = Math.sin(rad)*(r-18);

ctx.beginPath();

if(i%5 === 0) {

ctx.fillStyle = '#000'

ctx.arc(x, y, 2, 0, 2*Math.PI, false);

} else {

ctx.fillStyle = '#ccc';

ctx.arc(x, y, 2, 0, 2*Math.PI, false);

}

ctx.fill()

}

}

// 画时针

function drawHour(hour, minute) {

ctx.save();

ctx.beginPath();

var rad = 2*Math.PI/12 * (hour + minute/60)

ctx.rotate(rad);

ctx.lineWidth = 6;

ctx.lineCap="round";

ctx.moveTo(0, 10);

ctx.lineTo(0, -r/2)

ctx.stroke();

ctx.restore();

}

// 画分针

function drawMinute(minute) {

ctx.save()

ctx.beginPath();

var rad = 2*Math.PI/60 * minute;

ctx.rotate(rad);

ctx.lineWidth = 3;

ctx.lineCap = 'round';

ctx.moveTo(0, 10);

ctx.lineTo(0, -r+40);

ctx.stroke();

ctx.restore();

}

// 画秒针

function drawSecond(second) {

ctx.save()

ctx.beginPath();

ctx.fillStyle = 'red';

var rad = 2*Math.PI/60 * second;

ctx.rotate(rad);

ctx.lineWidth = 1;

ctx.lineCap = 'round';

ctx.moveTo(-2, 20);

ctx.lineTo(2, 20);

ctx.lineTo(1, -r+18)

ctx.lineTo(-1, -r+18)

ctx.fill();

ctx.restore();

}

// 画圆点

function drawDot() {

ctx.beginPath();

ctx.fillStyle = '#fff';

ctx.arc(0, 0, 3, 0, 2*Math.PI, false);

ctx.fill();

}

// drawBackground();

// drawDot()

function draw() {

//

ctx.clearRect(0, 0, width, height)

var now = new Date()

var hour = now.getHours();

var minute = now.getMinutes();

var second = now.getSeconds();

drawBackground();

drawHour(hour,minute)

drawMinute(minute)

drawSecond(second)

drawDot()

ctx.restore()

}

draw()

setInterval(draw, 1000)