var drawing = document.getElementById('drawing');if(drawing.getContext) { //变换var context = drawing.getContext('2d'); context.strokeStyle = 'rgba(0, 0, 255, 0.5)'; context.beginPath(); context.arc(100, 100, 99, 0, 2*Math.PI, false); context.moveTo(194, 100); context.arc(100, 100, 94, 0, 2*Math.PI, false);//变换原点context.translate(100, 100);//将坐标原点移动到该点//旋转表针context.rotate(1);//围绕原点旋转图像angle弧度//绘制分针context.moveTo(0, 0); context.lineTo(0, -80);//绘制时针context.moveTo(0, 0); context.lineTo(-65, 0); context.stroke(); context.rotate(-1); context.fillStyle = 'rgba(0, 0, 255, 0.5)'; context.save();//保存上下文状态，只保存绘图上下文的设置和变换，不会保存绘图上下文的内容context.fillStyle = 'pink'; context.translate(-100, -100); context.save(); context.fillStyle = 'green'; context.fillRect(220, 10, 50, 50); context.restore();//返回之前保存的设置context.fillRect(280, 10, 50, 50); context.restore(); context.fillRect(340, 10, 50, 50); }

　　drawImage()还可传入<canvas>元素作为第一个参数，表示把另一个画布内容绘制到当前画布上。

　　可能遇到的问题：drawImage()图片不显示在画布上，原因可能是你取图片的时候，此时图片还没有加载出来

window.onload = function(){var drawing = document.getElementById('drawing');if(drawing.getContext) {//图像var context = drawing.getContext('2d');var image = document.images[0];//参数依次表示为：图像元素、源图像x坐标、y坐标、目标的宽度、高度context.drawImage(image, 0, 0, 150, 250);//参数依次表示为：图像元素、源图像x坐标、y坐标、源图像宽度、高度、目标图像x坐标、y坐标、目标图像宽度、高度context.drawImage(image, 100, 300, 500, 600, 0, 0, 70, 80); } };

　　模式与渐变一样，都是从画布原点（0,0）开始的，将填充样式设置为模式对象，只表示在某个特定区域内显示重复的图像，而不是从某个位置开始绘制重复的图像。

　　 createPattern（）第一个参数也可以是<video>元素，或者是另一个<canvas>元素

window.onload = function(){var drawing = document.getElementById('drawing');if(drawing.getContext) {//阴影var context = drawing.getContext('2d'); context.shadowColor = 'rgba(0, 0, 0, 0.5)';//阴影颜色，默认黑色context.shadowOffsetX = 5;//x轴方向的阴影偏移量，默认0context.shadowOffsetY = 5;//y轴方向的阴影偏移量，默认0context.shadowBlur = 4;//模糊的像素数，默认0context.fillStyle = 'rgba(0, 0, 255, 0.5)'; context.fillRect(10, 10, 50, 50); context.fillStyle = 'pink'; context.fillRect(30, 30, 50, 50);//渐变var gradient = context.createLinearGradient(100, 10, 130, 130);//创建线性渐变，返回CanvasGradient对象的实例。参数：起点x坐标、y坐标、终点x坐标、y坐标gradient.addColorStop(0, 'white');//指定色标，参数：色标位置（0到1之间的数字，0表示开始的颜色，1为结束的颜色）、css颜色值gradient.addColorStop(1, 'black'); context.fillStyle = gradient; context.fillRect(100, 10, 50, 50);var createLinearGradient = function(context, x, y, width, height) {return context.createLinearGradient(x, y, x+width, y+height); };var gradientNew = createLinearGradient(context, 180, 10, 50, 50); gradientNew.addColorStop(0, 'red'); gradientNew.addColorStop(1, 'green'); context.fillStyle = gradientNew; context.fillRect(180, 10, 50, 50);var gradientRound = context.createRadialGradient(275, 35, 10, 275, 35, 30);//径向渐变,参数：起点圆的圆心、半径，终点圆的圆心、半径gradientRound.addColorStop(0, 'pink'); gradientRound.addColorStop(1, 'blue'); context.fillStyle = gradientRound; context.fillRect(250, 10, 50, 50);//模式，即重复的图像，可以用来填充或描边图形var image = document.images[0], pattern = context.createPattern(image, 'repeat-x');//创建新模式，参数：图像元素、是否重复（repeat、repeat-x、repeat-y、no-repeat）context.fillStyle = pattern; context.fillRect(350, 10, 350, 350); } }

基于box-shadow实现的打点效果

理论上，box-shadow可以实现任意的图形效果，自然我们可以利用box-shadow生成我们的点效果，然后通过animation控制不同时间点点的数目就可以实现点点点... loading效果了~

1. 渐进兼容
支持CSS3 animation动画的浏览器显示的就是打点动画效果；对于不支持的浏览器，IE7/IE8显示的是真实的字符..., IE9浏览器虽然也是CSS3生成，但是是静态的，没有动画效果；此乃渐进兼容。

2. 实现原理
首先HTML非常简单，就是一个标签一个类名（标签里面一定要空空如也），其他什么都不需要关心，就可以游刃几乎各种场景，如下：

XML/HTML Code复制内容到剪贴板

订单提交中<span class="dotting"></span>