html5之canvas

<header></header>

<nav></nav>

<section></section>

<article></article>

<footer></footer>

<aside></aside>

 safari(苹果浏览器内核)

-webkit-box-shadow:2px 2px 20px #888;      

-webkit-transform:rotate(-45deg);

box-shadow：<length> <length> <length> <length> || <color>   阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色 

-moz-transform:rotate(-45deg);   旋转角度

自带的查询功能

document.querySelector("td:hover")

默认选择第一个匹配的元素。

创建一个canvas对象（需要定义高宽）

<canvas id="diagonal" height="200" width="200" style="border:1px solid;"></canvas>

function drawDiagonal(){
var canvas = document.getElementById("diagonal");
var context = canvas.getContext('2d');

context.save();

context.translate(70,140);

context.beginPath();
context.moveTo(0,0);
context.lineTo(70,-70);

context.stroke();

context.restore();
}
window.addEventListener("load",drawDiagonal,true);

填充背景图片

 var bark = new Image();
bark.src = "bark.jpg";

context.drawImage(bark,-5,-50,10,50);

用背景图片描边

context.save();
context.translate(-10,350);
context.beginPath();
context.moveTo(0,0);
context.quadraticCurveTo(170,-50,260,-190);
context.quadraticCurveTo(310,-250,410,-250);
context.strokeStyle = '#663300';
context.lineWidth = 20;
context.stroke();
context.restore();

context.strokeStyle = context.createPattern(bark,'no-repeat');      创建路径
context.lineWidth = 20;
context.stroke();

quadraticCurveTo() 方法为当前路径添加一条贝塞尔曲线，起点是当前坐标，带有两组（x,y）参数，第一组代表控制点，第二组是曲线的终点。

添加渐变

var trunkGradient = context.createLinearGradient(-5,-50,10,50);
trunkGradient.addColorStop(0,"#663300");
trunkGradient.addColorStop(0.4,"#996600");
trunkGradient.addColorStop(1,"#552200");
context.fillStyle= trunkGradient;
context.fillRect(-5,-50,10,50);

缩放canvas对象

context.scale(2,2);

canvas变换

context.rotate(1.57);          旋转

context.transform(1,0,-0.5,1,0,0);

skew(30deg, 30deg)   倾斜

context.transform(a,b,c,d,e,f);
 
 
参数
描述
a
水平旋转绘图
b
水平倾斜绘图
c
垂直倾斜绘图
d
垂直缩放绘图
e
水平移动绘图
f
垂直移动绘图
context.fillStyle ='rgba(0,0,0,0.2)';  透明度

为文字增加投影

context.shadowColor = 'rgba(0,0,0,0.2)';
context.shadowOffsetX = 15;
context.shadowOffsetY = -10;
context.shadowBlur = 2;
context.fillText('Happy Trials!',200,60,400);