首页 > 代码库 > CANVAS
CANVAS
/**
* Created by ll0u on 1/9/2015.
*/
window.onload = function(){
var canvas = document.getElementById(‘canvas‘);
var context = canvas.getContext(‘2d‘);
//canvas的坐标，默认是x轴向右，y轴向下
context.strokeStyle = ‘green‘;
context.save(); //保存状态，即除绘画之外的所有状态，如strokeStyle等
context.strokeStyle = ‘red‘;
context.strokeRect(0,0,100,100);
context.restore();
context.strokeRect(300,300,100,100);//恢复状态，即除绘画之外的所有状态，如 context.save(); //保存状态，即除绘画之外的所有状态，如strokeStyle等,将 context.save(); //保存状态，即除绘画之外的所有状态，如strokeStyle等,将strokeStyle变为green
context.beginPath();//有了beginPath就可以不用moveTo了，第一个lineTo的作用就相当于moveTo
context.lineTo(200,200);
context.lineTo(200,300);
context.lineTo(300,300);
context.closePath(); //closePath会使不闭合的曲线变得闭合
context.fillStyle = ‘pink‘; //strokeStyle和fillStyle的值可以是颜色，也可以是渐变或pattern对象
context.fill(); //fill会使不闭合的曲线变得闭合
context.stroke();
context.beginPath(); //如果这里不加beginPath，则上一个路径会被下面的fill，stroke重新填充,而且线条也会从上一次终点绘制到下一次的起点，加了以后则告诉canvas，这里是一个新路径，与上面无关
context.lineTo(400,400);
context.lineTo(400,500);
context.lineTo(500,500);
context.closePath();
context.lineWidth = 10;
context.lineCap = ‘round‘; //设置线条起始点与终点的样式
context.lineJoin = ‘miter‘; //设置曲线连接处的样式 round、miter
context.miterLimit = 2;//当lineJoin为miter时，设置miter的程度，默认是20
context.fillStyle = ‘gray‘;
context.fill(); //因为canvas是基于状态绘图，所以fill和stroke会将所有的路径都填充
context.stroke(); //stroke最好放在fill的后面，若放在fill之前，当线宽较宽时，会有一部分被fill覆盖
context.beginPath();
context.strokeRect(250, 250, 50, 50) //strokeRect不会造成与上一次线条的终点连接;
context.closePath();
context.save();
context.translate(300,300); //将canvas的参考点移到300,300
context.scale(2,2); //将canvas绘制的图像进行缩放
context.rotate(45);//将canvas绘制的图像进行旋转
context.beginPath();
context.moveTo(0,0);
context.lineTo(100,100);
context.closePath();
context.strokeStyle = ‘gold‘;
context.stroke();
context.restore();
context.save();
context.beginPath();
context.arc(200, 200, 200, 0, Math.PI, true); //绘制圆弧,（圆心，半径，起始弧度，终止弧度，方向）会不加beginPath和上一次的终点连接
context.stroke();
context.closePath();
context.restore()
context.save();
context.beginPath();
context.moveTo(400,400);
context.arcTo(500, 400, 500, 600, 100); //(点1，点2， 半径),从上一次起点开始，在三个点之间确定半径为50的圆弧
context.stroke();
context.closePath();
context.restore()
context.save();
context.beginPath();
context.moveTo(350,200);
context.quadraticCurveTo(450, 100, 550, 200); //二次贝塞尔曲线（点1，点2），以上次终点为起点，点1为控制点，点2为终点画弧。
context.stroke();
context.closePath();
context.restore()
context.save();
context.beginPath();
context.moveTo(400,300);
context.bezierCurveTo(500,0, 700,600, 800,300);//三次贝塞尔曲线，（点1，点2，点3），以上次终点为起点，点1和点2为控制点，点3为终点画弧。
context.stroke();
context.closePath();
context.restore()
var gradientStyle = context.createLinearGradient(200,200, 200,400); //（点1，点2）创建线性渐变色，起点到终点
gradientStyle.addColorStop(0, ‘pink‘); //为渐变色添加颜色
gradientStyle.addColorStop(0.5, ‘gold‘);
gradientStyle.addColorStop(1, ‘gray‘);
context.save();
context.beginPath();
context.moveTo(200,200);
context.lineTo(200,400);
context.closePath();
context.strokeStyle = gradientStyle;
context.stroke();
context.restore()
var gradientRadialStyle = context.createRadialGradient(200,200,0, 200,200,100); //（圆1，圆2）创建径向渐变色，圆环1到圆环2
gradientRadialStyle.addColorStop(0, ‘pink‘); //为渐变色添加颜色
gradientRadialStyle.addColorStop(0.5, ‘gold‘);
gradientRadialStyle.addColorStop(1, ‘gray‘);
context.save();
context.beginPath();
context.arc(200, 200, 100, 0, Math.PI*2);
context.closePath();
context.fillStyle = gradientRadialStyle;
context.fill();
context.restore()
var img = new Image();
img.src = http://www.mamicode.com/‘16.jpg‘;
img.onload = function(){
var pattern = context.createPattern(img, ‘repeat‘); //(图像或视频或canvas，重复放方式),创建一个填充对象
context.save();
context.fillStyle = pattern;
context.beginPath();
context.fillRect(100, 100, 100, 100);
context.closePath();
context.restore()
}
drawStar(context, 5, 10, ‘gold‘, 600, 500);
context.save();
context.lineWidth = 2;
context.globalAlpha = 0.2;
context.globalCompositeOperation = ‘destination-over‘;
context.font = ‘25px "微软雅黑"‘;
context.textAlign = ‘center‘;
context.textBaseline = ‘bottom‘;
context.beginPath();
context.strokeText(‘fefefe‘, 100, 100);
context.closePath();
context.fill();
context.restore();
/* context.save();
context.beginPath();
context.fillStyle = ‘black‘;
context.fillRect(0,0,800,600);
context.closePath();
context.restore();
context.save();
context.beginPath();
context.fillStyle = ‘white‘;
context.arc(400,300,100,0,6.28);
context.fill(); //使下面出现的图像都只在这个范围内才显示
context.clip();*/
canvas.onclick = function(){
var x = window.event.clientX - canvas.getBoundingClientRect().left;
var y = window.event.clientY - canvas.getBoundingClientRect().top;
context.save();
context.beginPath();
context.lineTo(0,0);
context.lineTo(800,0);
context.lineTo(800,600);
context.lineTo(0,800);
context.lineTo(0,0);
if(context.isPointInPath(x, y)){ //判断点击的点是否在上面的范围内
alert(99)
}
context.restore();
}
context.save();
context.beginPath();
context.shadowColor = ‘gray‘; //阴影颜色
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 1;
context.lineTo(20,20);
context.lineTo(500,200);
context.stroke();
context.closePath();
context.restore();
}
function drawStar(cxt, r, R,color, tranX, tranY){
cxt.save();
cxt.beginPath();
for(var i=0; i<=5; i++){
cxt.lineTo(R*Math.cos(((18+72*i)/360)*2*Math.PI) + tranX, R*Math.sin(((18+72*i)/360)*2*Math.PI) + tranY);
cxt.lineTo(r*Math.cos(((54+72*i)/360)*2*Math.PI) + tranX, r*Math.sin(((54+72*i)/360)*2*Math.PI) + tranY);
}
cxt.fillStyle = color;
cxt.closePath();
cxt.fill();
cxt.restore()
}
CANVAS