canvas-1
2018-10-18 本文已影响0人
guyigg
canvas是一个状态的操作变化
<canvas id="canvas"></canvas>
<script>
var canva = documentgetElementById("canvas");//获取到页面中的画布
var context = canva.getContext("2d");//获取到画布中的画笔（状态）
context.beginPanth();//开始本次画图
context.moveTo(0,0);//本次画笔初始位置
context.linTo(200,200);//画笔到达位置
context.strokeStyle="red";//本次画笔颜色状态
context.stroke();//绘制本次画笔状态并结束
</script>
beginPanth()以防万一这个是必要的
closePanth()画封闭图形时使用，放在stroke里面
fillStyle对封闭图形的填充与fill()（颜色填充绘制函数）成对出现
画五角星
-
画五角星就要算出来五角星每个点的坐标位置，最好的办法就是利用两个圆来算出每个点的坐标如下：
function drawStrat(obj,R,r,x,y,rot){
var cet = obj.getContext('2d');
cet.beginPath();
for(var i=0;i<5;i++){
//在js里面角度要转换成弧度来计算，把五角星的十个点分成两个圆来算坐标位置，在canvas里面y轴是从上往下的与数学方向相反
cet.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,
-Math.sin((18+i*72-rot)/180*Math.PI)*R+y);
cet.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,
-Math.sin((54+i*72-rot)/180*Math.PI)*r+y);
}
cet.closePath();
cet.strokeStyle = 'yellow';
cet.stroke();
}
其中，obj是canvas，R表示大圆的半径，r表示小圆的半径，x、y表示五角星的坐标,rot表示五角星旋转角度。
- 下面是满天星的代码：
var canva_4 = document.getElementById('test_4');
for(var i=0;i<100;i++){
var r = Math.random()*10+10;
var x = Math.random()*canva_4.width;
var y = Math.random()*canva_4.height;
var rot = Math.random()*360;
drawStrat(canva_4,r,r/2,x,y,rot);
}
图形变换
translate(x,y) 移动的位移坐标
ratate(deg) 旋转角度
scale(sx,sy) 缩放 <使用这个缩放的话，不仅图形大小会缩放，图形的坐标也会跟着缩放，图形的边框也会跟着缩放，所以视情况使用>
save() 保存当前环境的状态。与 restore() 返回之前保存过的路径状态和属性。成对出现
var canva_1 = document.getElementById('test_1');
var cext = canva_1.getContext('2d');
cext.beginPath();
cext.save();
cext.translate(200,200);
cext.rotate(45);
cext.scale(2,2);
cext.fillStyle='pink';
cext.fillRect(0,0,100,100);
cext.restore();
cext.closePath();
cext.beginPath();
cext.save();
cext.translate(300,300);
cext.fillStyle='green';
cext.fillRect(0,0,100,100);
cext.restore();
cext.closePath();
- 图形变换实质是对一个图形的所有顶点坐标进行一次再计算，这个计算的过程是由一个叫做变换矩阵来完成的，二维的变换矩阵是
3*3，三维的就是4*4等。
transform(a,b,c,d,e,f)设置变换矩阵,替换绘图的当前转换矩阵。
setTransform(a,b,c,d,e,f)将当前转换重置为单位矩阵。然后运行 transform()。
var canva_1 = document.getElementById('test_1');
var cext = canva_1.getContext('2d');
cext.beginPath();
cext.fillStyle='green';
cext.strokeStyle='black';
cext.lineWidth = 5;
cext.save();
cext.transform(1,0,0,1,0,0);
cext.transform(1,0,0,1,100,50);
cext.transform(2,0,0,2,100,50);
cext.transform(1,0.2,0.2,2,100,50);
cext.setTransform(1,0,0,1,0,0);
cext.fillRect(0,0,100,100);
cext.strokeRect(0,0,100,100);
cext.restore();
cext.closePath();
每次设置的transform()都会被下面的延续，所有才有setTransform()来重置前面设置过的。
-
深入了解 fillStyle
createLinearGradient(xstart,ystart,xend,yend) 创建线性渐变（用在画布内容上）。
createRadialGradient(x0,y0,r0,x1,y1,r1) 创建放射状/环形的渐变（用在画布内容上）。
addColorStop(stop,color) 规定渐变对象中的颜色和停止位置。
var canva_1 = document.getElementById('test_1');
var cext = canva_1.getContext('2d');
var lineGrad = createLinearGradient(0,0,400,400);
lineGrad.addColorStop(0.0,'#fff');
lineGrad.addColorStop(1.0,'#000');
cext.fillStyle = lineGrad;
cext.fillRect(0,0,400,400);
createPattern(img,'repeat-style') 在指定的方向上重复指定的元素。也就是可以让画笔填充状态为一张图片，一个画布，一段视频
//画笔填充状态为一张图片
var canva_1 = document.getElementById('test_1');
var ctx = canva_1.getContext('2d');
var canvaImg = new Image();
canvaImg.src = 'test.jpg';
canvaImg.onload = function(){
var pattern = ctx.createPattern(canvaImg ,'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0,0,100,100);
}
//画笔填充状态为一个画布
var canva_2 = document.getElementById('test_2');
var cxt = canva_2.getContext('2d');
var pat = cxt.createPattern(_canva(),'repeat');
cxt.fillStyle = pat;
cxt.fillRect(0,0,500,500);
function _canva(){
var _canva = document.createElement('canvas');
var cxst = _canva.getContext('2d');
_canva.height = 100;
_canva.width = 100;
_canva.style.border = '1px solid blue';
cxst.beginPath();
for(var i=0;i<5;i++){
cxst.lineTo(Math.cos((18+i*72)/180*Math.PI)*50+50,
-Math.sin((18+i*72)/180*Math.PI)*50+50);
cxst.lineTo(Math.cos((54+i*72)/180*Math.PI)*25+50,
-Math.sin((54+i*72)/180*Math.PI)*25+50);
}
cxst.closePath();
cxst.fillStyle='yellow';
cxst.fill();
return _canva;
};
总结fillStyle的相关内容，所有fillStyle的函数方法都可以用在strokeStyle上
fillStyle总结.png
gradient渐变.png
其他填充状态.png
