创建时间：2017-04-25
HTML 结构
<canvas id="ca" style='background: #fff;height:800px;width:800px;border:1px solid #ccc;'>你的浏览器不支持canvas!</canvas>
javascript代码
阿里云盘资源
网盘资源搜索
window.onload=function(){ var ca = document.getElementById('ca'); var cd = ca.getContext('2d');//绘制环境，目前支持2D的场景，webgl兼容部分浏览器3D绘图
//绘制带填充方块
cd.fillStyle='#f50';//填充的颜色
cd.fillRect(100,100,300,300);//带填充的方块，默认黑色
//绘制带边框方块
cd.lineJoin='bevel';//线条样式 round 圆角，miter默认，bevel斜角|菱角
cd.strokeStyle='red';//边框颜色
cd.lineWidth=10;//线条宽带
cd.strokeRect(430,430,50,50);//带边框的方块
cd.strokeRect(500.5,500.5,100,200);//像素默认占两块的解决方法
//绘制直线
cd.lineWidth=10;//线条宽度
cd.lineCap='round';//butt默认，round圆角，square高度多出为宽一半的值
cd.moveTo(100,100);//开始移动到，两个参数，X，Y
cd.lineTo(200,200);//移动到这个坐标，两个参数，X，Y
cd.stroke();//链接上面的的坐标
//绘制路径
cd.beginPath();//开始绘制路径
cd.moveTo(100,100);//开始移动到，两个参数，X，Y
cd.lineTo(200,200);//移动到这个坐标，两个参数，X，Y
cd.lineTo(200,300);//移动到这个坐标，两个参数，X，Y
cd.closePath();//闭合路径
cd.stroke();//链接上面的的坐标
//绘制图案，进行填充
cd.beginPath();//开始绘制路径
cd.moveTo(100,100);//开始移动到，两个参数，X，Y
cd.lineTo(200,200);//移动到这个坐标，两个参数，X，Y
cd.lineTo(200,300);//移动到这个坐标，两个参数，X，Y
cd.closePath();//闭合路径
cd.fill();//链接上面的的坐标，进行填充，默认黑色
//绘制路径，绘制方块
cd.beginPath();//开始绘制路径
cd.rect(100,100,100,100);//绘制方块
cd.closePath();//闭合路径
cd.stroke();//链接上面的的坐标
cd.fill();//链接上面的的坐标，进行填充
//save，restore 对某一个区域作用，不会影响到其他
cd.save();//保存路径
cd.fillStyle='#f50';//填充的颜色
cd.fillRect(100,100,300,300);//带填充的方块，默认黑色
cd.restore();//恢复路径
//清空画布
cd.clearRect(0,0,ca.width,ca.height);//x轴，y轴，需要清空的宽，需要清空的高
//鼠标画线
ca.onmousedown = function(ev){ var evo = ev||window.event;
cd.moveTo(evo.clientX-ca.offsetLeft,evo.clinetY-ca.offsetTop);//开始移动的坐标，用鼠标的x，y轴来获取
document.onmousemove = function(ev){ var evo = ev||windos.event;
cd.lineTo(evo.clientX-ca.offsetLeft,evo.clientY-ca.offsetTop);//移动后的坐标，用鼠标的x，y轴来获取
cd.stroke();//链接坐标与坐标之间
}; document.onmouseup = function(){ document.onmousedown=null; document.onmousemove=null;
}
}// 移动的方块
var num = 0;
cd.fillRect(0,0,100,100);//绘制方块
setInterval(function(){
num++;
cd.clearRect(0,0,ca.width,ca.height);//清空画布
cd.fillRect(num,num,100,100);//绘制方块
},30) //绘制圆形
cd.moveTo(200,200);
弧度 = 角度*Math。PI/180
cd.arc(200,200,150,0,360*Math.PI/180,false);//x，y,半径，起始幅度，结束幅度,false瞬时间|ture逆时针
cd.closePath();//闭合
cd.stroke();//连接
//绘制钟表// function toDraw(){// var x = 200;//坐标x// var y = 200;//坐标y// var r = 150;//半径//// cd.clearRect(0,0,ca.width,ca.height);//清空画布//// var oDate = new Date();// var oHours = oDate.getHours();//获取小时// var oMin = oDate.getMinutes();//获取分钟// var oSen = oDate.getSeconds();//获取秒//// var hoursVal = (-90 + oHours*30) * Math.PI/180;//得到小时的度数// var minVal = (-90 + oMin*6) * Math.PI/180;//得到分钟的度数// var senVal = (-90 + oSen*6) * Math.PI/180;//得到秒的度数//////// cd.beginPath();// for(var i=0;i<60;i++){// cd.moveTo(x,y);// cd.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);//画出分钟刻盘// }// cd.closePath();// cd.stroke();//////// cd.fillStyle = '#fff';// cd.beginPath();// cd.moveTo(x,y);// cd.arc(x,y,140,0,360*Math.PI/180,false);//绘制白色圆盘盖住// cd.closePath();// cd.fill();//// cd.beginPath();// cd.lineWidth =3;// for(var i=0;i<60;i++){// cd.moveTo(x,y);// cd.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);//绘制小时刻盘// }// cd.closePath();// cd.stroke();//// cd.fillStyle = '#fff';// cd.beginPath();// cd.moveTo(x,y);// cd.arc(x,y,130,0,360*Math.PI/180,false);//绘制白色圆盘盖住// cd.closePath();// cd.fill();//// cd.beginPath();// cd.lineWidth = 3;// cd.moveTo(x,y);// cd.arc(x,y,100,hoursVal,hoursVal,false);//绘制时针// cd.closePath();// cd.stroke();//// cd.beginPath();// cd.lineWidth = 2;// cd.moveTo(x,y);// cd.arc(x,y,120,minVal,minVal,false);//绘制分针// cd.closePath();// cd.stroke();//// cd.beginPath();// cd.lineWidth = 1;// cd.moveTo(x,y);// cd.arc(x,y,130,senVal,senVal,false);//绘制秒针// cd.closePath();// cd.stroke();// }// setInterval(toDraw,1000);//// toDraw();
//绘制曲线
cd.moveTo(100,200);
cd.arcTo(100,100,200,100,50);//第一组坐标、第二组坐标、半径
cd.stroke(); //绘制贝塞尔曲线,第一种
cd.moveTo(100,200);
cd.quadraticCurveTo(100,100,300,500);//贝塞尔曲线,第一组控制点、第二组结束坐标
cd.stroke(); //绘制贝塞尔曲线，第二种
cd.moveTo(100,200);
cd.bezierCurveTo(100,100,200,200,200,100);//贝塞尔曲线,第一组控制点、第二组控制点,第三组结束坐标
cd.stroke(); //变换 偏移
cd.translate(100,100);//偏移
cd.fillRect(0,0,100,100); //变换 偏移+旋转
cd.translate(100,100);//偏移
cd.rotate(45*Math.PI/180);//旋转
cd.fillRect(0,0,100,100); //变换 偏移+旋转+缩放
cd.translate(100,100);//偏移
cd.rotate(45*Math.PI/180);//旋转
cd.scale(2,2);//缩放
cd.fillRect(0,0,100,100); //案例 旋转加缩放// var num1 = 0;// var num2 = 0;// var num3 = 1;// cd.translate(100,100);//偏移// setInterval(function(){// num1++;// cd.save();// cd.clearRect(0,0,ca.width,ca.height);// if(num2==100){// num3 = -1;// }else if(num2==0){// num3 = 1;// }// num2+=num3;// cd.scale(num2*1/50,num2*1/50);// cd.rotate(num1*Math.PI/180);//旋转// cd.translate(-50,-50);//偏移// cd.fillRect(0,0,100,100);// cd.restore();//// },30)
//插入图片
var Img = new Image();
Img.onload = function(){
draw(this);
};
Img.src = '1.jpg'; function draw(obj){
cd.drawImage(obj,0,0);//五个参数 图片对象，x，y坐标，(图片宽，图片高 可不给)
} //设置图片背景
var Img = new Image();
Img.onload = function(){
draw(this);
};
Img.src = '1.jpg'; function draw(obj){ var obg = cd.createPattern(obj,'repeat');//图片对象,平铺方式 repeat、repeat-x、repeat-y、no-repeat
cd.fillStyle = obg;
cd.fillRect(0,0,500,500);
} //线性渐变
var obj = cd.createLinearGradient(150,100,150,200);//x,y,终点x，终点y
obj.addColorStop(0,'red');
obj.addColorStop(1,'blue');
cd.fillStyle = obj;
cd.fillRect(150,100,100,100); //放射性渐变
var obj = cd.createRadialGradient(200,200,100,200,200,200);//6个参数，第一个圆的坐标和半径，第二个圆的坐标和半径
obj.addColorStop(0,'red');
obj.addColorStop(0,'#ccc');
obj.addColorStop(1,'blue');
cd.fillStyle = obj;
cd.fillRect(0,0,400,400); //文本
cd.font = '60px impact';//文字大小，文字样式
cd.textAlign //文本的左右居中方式 end right center
cd.textBaseline = 'top'; //文本上下位置的方式，alphabetic top middle bottom
cd.fillStyle = 'red';
cd.fillText('陈广安',0,0);//文本，x，y
cd.strokeText('陈广安',0,200);//镂空文本，x，y
//文本左右垂直居中
cd.font = '60px impact';//文字大小，文字样式
cd.textBaseline = 'top'; //文本上下位置的方式，alphabetic top middle bottom
var w = cd.measureText('陈广安').width;//只有宽度，没有高度
cd.fillText('陈广安',(ca.width-w)/2,(ca.height-60)/2);//文本，x，y// 阴影
cd.font = '60px impact';//文字大小，文字样式
cd.textBaseline = 'top'; //文本上下位置的方式，alphabetic top middle bottom
cd.shadowOffsetX = 10;//阴影x轴的偏移位置
cd.shadowOffsetY = 10;//阴影x轴的偏移位置
cd.shadowBlur = 3 ;//高斯模糊值
cd.shadowColor = 'yellow';//阴影颜色。默认颜色黑色透明
var w = cd.measureText('陈广安').width;//只有宽度，没有高度
cd.fillText('陈广安',(ca.width-w)/2,(ca.height-60)/2);//文本，x，y
}上一篇：HTML5+CSS3