1.canvas绘制
步骤
添加canvas元素，定义id和范围
js里获取canvas元素
通过getcontext()方法获取2d绘制环境
通过不同的函数进行图形绘制
坐标定位
绘制的图形定位都是以canvas的左上角为(0,0)原点
绘制直线
moveto(): 规定起始点
lineto(): 从起点绘制到规定坐标的直线
stroke(): 实现绘制直线的功能
fill(): 实现填充功能
实例：绘制一个三角形
html代码

js代码
window.onload = function(){ var canvas = document.getelementbyid(canvas); canvas.width = 800; canvas.height = 800; var context = canvas.getcontext('2d'); context.strokestyle = red; context.moveto(100, 100); context.lineto(200, 100); context.lineto(150,50); context.lineto(100,100); context.stroke(); };
绘制矩形
fillstyle():设置矩形填充颜色。
fillrect(x,y,width,height)。
strokestyle():设置矩形轮廓颜色。
strokerect(x,y,width,height)。
绘制圆形(弧形)
beginpath():开始绘制路线
arc(x,y,radius,startangle,endangle,anticlockwise)
设置绘制的中心点，半径，起始角度，结束角度和绘制方向。
贝塞尔曲线
二次贝塞尔曲线
quadraticcurveto(cp1x,cp1y,x,y)
cp1x,cp1y 表示一个控制点坐标;x,y代表终点坐标。
三次贝塞尔曲线
beziercurveto(cp1x,cp1y,cp2x,cp2y,x,y)
cp1x,cp1y和cp2x,cp2y分别代表
两个控制点。
实例1：绘制一个五角星
window.onload = function() { var canvas = document.getelementbyid(canvas); var context = canvas.getcontext('2d'); drawstar(context, 120, 120, 80, 30, 10, yellow, 0); } function drawstar(context, x, y, r, r, width, color, rotation) { context.beginpath(); for (var i = 0; i < 5; i++) { context.lineto(math.cos((18 + i * 72 - rotation) / 180 * math.pi) * r + x, -math.sin((18 + i * 72 - rotation) / 180 * math.pi) * r + y); context.lineto(math.cos((54 + i * 72 - rotation) / 180 * math.pi) * r + x, -math.sin((54 + i * 72 - rotation) / 180 * math.pi) * r + y); } context.closepath(); context.linewidth = width; context.fillstyle = color; context.fill(); }
实例2:绘制宝马标志
window.onload = function() { var canvas = document.getelementbyid(canvas); canvas.width = 800; canvas.height = 800; var context = canvas.getcontext('2d'); //圆心坐标x,y 内圆半径r 外圆半径r var x = 100; var y = 100; var r = 100; var r = r + 50; var colors = array(#87cefa, #fafafa, #000); context.beginpath(); context.translate(100, 100); context.arc(x, y, r, 0, math.pi * 2); line_gra = context.createlineargradient(-10, -10,20, 50); line_gra.addcolorstop(0, #ddd); line_gra.addcolorstop(1, #262626); context.linewidth = 3; context.strokestyle = #000; context.fillstyle = line_gra; context.closepath(); context.stroke(); context.fill(); drawbiground(context, x, y, r, 53, #add8e6, 7); drawbm(context, x, y, r, colors); drawbiground(context, x, y, r, 3, #9fb6cd, 5); context.beginpath(); context.fillstyle = #fff; context.font = bold 40px verdana; context.filltext(m, 80, -10); context.rotate(math.pi / 6); context.filltext(w, 125, -75); context.rotate(-(math.pi / 2)); context.filltext(b, 0, 35); context.restore(); } function drawbm(context, x, y, r, colors) { var color; for (var i = 0; i < 4; i++) { context.beginpath(); context.moveto(x, y); context.arc(x, y, r, math.pi * i / 2, math.pi * (i + 1) / 2); if (i == 0 || i == 2) { color = colors[0]; } else { color = colors[1]; } context.fillstyle = color; context.linewidth = 2; context.strokestyle = colors[2]; context.closepath(); context.fill(); context.stroke(); } } function drawbiground(context, x, y, r, addr, color, linewidth) { context.beginpath(); context.arc(x, y, r + addr, 0, math.pi * 2); context.linewidth = linewidth; context.strokestyle = color; context.closepath(); context.stroke(); }
2.css3 阴影 box-shadow
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 css 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。
3.css3 transform属性
transform: none|transform-functions;
transform:rotate()： 旋转,deg是度的意思
transform: rotate(-10deg);
transform:skew()： 倾斜
transform:skew(20deg);
transform:scale()： 缩放,x方向2倍，y方向1.5倍
transform: scale(2, 1.5);
transform:translate()： 平移,x方向平移120px，y方向平移10px
transform:translate(120px,10px);
4.css3 transtion属性
transition: property duration timing-function delay;
transition-property 规定设置过渡效果的 css 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。
div { width:100px; transition: width 2s; -moz-transition: width 2s; /* firefox 4 */ -webkit-transition: width 2s; /* safari 和 chrome */ -o-transition: width 2s; /* opera */ }