Canvas，听着像艺术家画板？其实在网页设计里头也是个神器！不只是简单的界面元素，功能超强大的创作平台就藏在它下面。用几个简明的API就能画出各种形状和特效，做网页游戏都木问题~快来跟我一起探寻下Canvas这片魅力四溢的奇幻大陆，看看这些神奇的绘图API到底怎么玩转艺术的魔法。
beginPath与closePath的舞蹈
var icanvas=document.getElementById("iCanvas");
var ictx=icanvas.getContext("2d");
ictx.beginPath();
ictx.moveTo(0,0);
ictx.lineTo(300,150);
ictx.lineTo(3,150);
ictx.closePath();
ictx.stroke();
在Canvas的世界里，beginPath和closePath就像两个跳舞的小伙伴，一起来决定画布上的起点和终点。首先，beginPath告诉大家新的路径要开画啦；接着，closePath就会把现在的位置引导回刚开始的起点，这样一来，我们的路径就是封闭的。不过别忘了，如果让closePath跟在stroke函数后面，那可画不出封闭线，毕竟在那之前，路径的描绘早就搞定了。
lineJoin的魅力
lineJoin这个API能控制线交叉时候的转弯抉择！设成miter，就能用miterLimit调整转弯处的最长距离，让你的图变形更精细、更好看！比较下两个线交叉，转弯处怎么好看地接上，觉得挺好玩儿？那就是lineJoin的魔力所在~
strokeStyle的色彩世界
strokeStyle，这可是咱们画图软件里的变色龙，给线条涂抹上各种各样的色彩、渐变和模式。就像画家挥舞着画笔一样，随心所欲地挑选你喜欢的单色调，或者绘制炫酷的渐变效果，或是给图形添加独特的模式质感。每一种选择，都能让你笔下的画面散发出截然不同的气质和情绪！
arc的曲线之美
Arc这个API能画漂亮的曲线！只要选好半径、起点和终点，就可以画出各种弧线和圆圈来。就像大自然里的河流山川，看起来很有动感，也很有生机。
var iCanvas=document.getElementById("iCanvas");
var ictx=iCanvas.getContext("2d");
ictx.beginPath();
ictx.strokeStyle="#0000ff";
ictx.lineWidth=20;
ictx.lineCap="round";
ictx.moveTo(10,10);
ictx.lineTo(80,80);
ictx.stroke();
ictx.beginPath();//在这里必须beginPath，不然一直会以第一个为基础会话，在最后的stroke的时候，会再次画一条黑色的斜线，一共3条线。
ictx.strokeStyle="#000000";
ictx.lineCap="butt";
ictx.lineWidth=10;
ictx.moveTo(80,10);
ictx.lineTo(10,80);
ictx.stroke();
fillRect的实用之选
FillRect这个API可真是个好帮手，它能迅速画出填满颜色的矩形来。只要告诉它矩形的起点、长度和宽高，立马就有个矩形在你眼前呈现出来了。这种简单明快的方法非常适用那些需要快速布置和设计的情况！
createLinearGradient的渐变魔法
ictx.beginPath(); ictx.moveTo(20,20); // 创建开始点 ictx.lineTo(100,20); // 创建水平线 ictx.arcTo(150,20,150,70,50); // 创建弧 ictx.lineTo(150,120); // 创建垂直线 ictx.stroke();
“CreateLinearGradient”这货儿就是给咱们搭个直线渐变色。只要定好起点和终点，就能把握住方向和效果。这样的渐变色，就像天边的彩虹，一点点地由一种颜色变幻成另一种颜色，超级美轮美奂，让人忍不住想探索一番。
globalAlpha的透明之谜
你知道吗？用globalAlpha这个API，图形的透明度就能变了！调个适合的数值，半透明和全透明的效果都能出来。特别有意思，好像雾里看花，既清楚又模糊，远近感更强，神秘得要命。
toDataURL的数据之桥
ictx.fillStyle="#0000ff";//设定填充颜色 ictx.fillRect(20,20,150,100); ictx.strokeRect(180,20,100,100);
canvas.toDataURL这个小程序，就是把画布上的图像变成了一串base64码。这串代码，可厉害了！它就像一座桥，连通我们的画布和外面的世界。这样一来，我们就能把做好的图片保存起来，或者直接展示给大家看。
clip的剪裁之术
ictx.shadowBlur=20; ictx.shadowColor="#456"; ictx.shadowOffsetX=-10; ictx.shadowOffsetY=30;//先设置阴影再画矩形 ictx.fillStyle="#108997"; ictx.fillRect(20,20,100,80); ictx.stroke();
要说Clip这个神器，它能把画布上的任何地方都能剪成想咋样就咋样的形状和大小！有了这个功能，你的绘画活动就只能在这个框里进行。这就像个雕塑师手里的刻刀，精准又细腻，能做出独一无二的艺术品。
save与restore的时光机
这个save和restore简直就像Canvas的两把“时光机钥匙”save就是把目前画布上的东西存起来；那么restore，就是帮你找回以前存过的画面。这样子，绘画的时候想怎么摸鱼都行~随时随地回到过去，重头来还是接着画，随心所欲！
Canvas就是一个超强的画板，用这些API就能玩出各种花样。每个API都有自己的特长，汇聚在一起，简直就像一个大型的绘画游戏。不管是简笔画还是炫酷的动画，Canvas都能帮你搞定。
var grd=ictx.createLinearGradient(0,0,170,0); grd.addColorStop(0,"#000"); grd.addColorStop(0.5,"#378923"); grd.addColorStop(1,"#ddd"); ictx.fillStyle=grd;//这里渐变是一个对象，用来向fillstyle传值 ictx.fillRect(20,20,150,100); var grd=ictx.createRadialGradient(300,225,15,250,225,100); grd.addColorStop(0,"#345"); grd.addColorStop(1,"#fff"); ictx.fillStyle=grd; ictx.fillRect(200,150,150,100);
评论0