你若眼熟，真的純屬巧合。

02-25

今天下午看了會兒Canvas的教程，覺得挺有意思的，隨便寫了個小東西。

小的時候，鄰居家有個老爺爺，我都叫他張大爺。

對我非常好，有什麼好吃的都會留一份給我。

但自從多年前我搬家了以後，就再也沒有見過他。

甚是懷念。

於是用Javascript結合Html和CSS碼一個畫像，

以寄託我的思念。

鄭重聲明：畫作人物你若眼熟，

真的純屬巧合。

先上個計算草稿：

最終效果圖：

代碼部分：

<!doctype html><html lang="zh"><head><meta charset="UTF-8"><title>玲瓏邪僧</title> <style type="text/css">#canvas{ background-color:#E8E5E5;}</style></head><body> <canvas id="canvas"> 如果你到這行字，說明你的瀏覽器已經被我帥得不支持canvas了。 </canvas></body> <script> window.onload = function(){var canvas = document.getElementById("canvas"); canvas.width = 1500; canvas.height = 800; var context = canvas.getContext("2d"); context.beginPath(); context.moveTo(150,250); context.lineTo(150,300); context.lineWidth = 8; context.strokeStyle = "#795A5A"; context.stroke(); context.beginPath(); context.moveTo(550,250); context.lineTo(550,300); context.lineWidth = 8; context.strokeStyle = "#795A5A"; context.stroke(); context.beginPath(); context.moveTo(550,275); context.lineTo(600,270); context.lineCap = "round"; context.lineTo(650,275); context.closePath(); context.lineWidth =18; context.lineCap = "round"; context.strokeStyle = "#393636"; context.stroke();drawArcTo(context, 200, 200, 550, 200, 550, 250, 50);drawArcTo(context, 500, 200, 150, 200, 150, 250, 50);drawArcTo(context, 450, 400, 150, 400, 150, 150, 110);drawArcTo(context, 250, 400, 550, 400, 550, 150, 110);context.save();context.translate(500,0); context.beginPath(); context.moveTo(150,250); context.lineTo(150,300); context.lineWidth = 8; context.strokeStyle = "#795A5A"; context.stroke(); context.beginPath(); context.moveTo(550,250); context.lineTo(550,300); context.lineWidth = 8; context.strokeStyle = "#795A5A"; context.stroke();drawArcTo(context, 200, 200, 550, 200, 550, 250, 50);drawArcTo(context, 500, 200, 150, 200, 150, 250, 50);drawArcTo(context, 450, 400, 150, 400, 150, 150, 110);drawArcTo(context, 250, 400, 550, 400, 550, 150, 110);context.restore();context.save();context.translate(90,40);context.lineWidth = 12;context.strokeStyle = "#333";context.beginPath();context.moveTo(161, 247);context.bezierCurveTo(208, 309, 221, 158, 349, 258);context.stroke();context.restore();context.save();context.translate(590,40);context.lineWidth = 12;context.strokeStyle = "#333";context.beginPath();context.moveTo(152, 262);context.bezierCurveTo(180, 236, 226, 182, 349, 258);context.stroke();context.restore();context.save();context.translate(238,220);context.lineWidth = 14;context.strokeStyle = "#333";context.beginPath();context.arc(100,75,15,0,2*Math.PI);context.strokeStyle="black";context.stroke();context.restore();context.save();context.translate(700,215);context.lineWidth = 14;context.strokeStyle = "#333";context.beginPath();context.arc(100,75,15,0,2*Math.PI);context.strokeStyle="black";context.stroke();context.restore();context.save();context.translate(460,375);context.lineWidth = 14;context.strokeStyle = "#333";context.beginPath();context.arc(100,75,5,0,2*Math.PI);context.strokeStyle="black";context.stroke();context.restore();context.save();context.translate(550,375);context.lineWidth = 14;context.strokeStyle = "#333";context.beginPath();context.arc(100,75,5,0,2*Math.PI);context.strokeStyle="black";context.stroke();context.restore();} function drawArcTo(cxt, x0, y0, x1, y1, x2, y2, r){ cxt.beginPath(); cxt.moveTo(x0, y0); cxt.arcTo(x1, y1, x2, y2, r); cxt.lineWidth = 8; cxt.strokeStyle = "#1E1D1D"; cxt.stroke(); cxt.beginPath(); cxt.moveTo(x0, y0); cxt.lineTo(x1, y1); cxt.lineTo(x2, y2); } </script></html>

有興趣的朋友可以保存為：

前端吳彥祖.html

就可以進行查看了。

以上的代碼里，主要用了以下幾個函數：

三次貝塞爾曲線（這裡主要畫了眼睛）：

context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

另外還有二次貝塞爾曲線，一開始打算畫眼鏡：

context.quadraticCurveTo(cpx,cpy,x,y);

但是我這裡沒有用，

利用的是：

arcTo(x1,y1,x2,y2,radius)

這個方法是利用切點畫圓弧。

translate(x,y)這個方法用於平移變換。

context.save();context.restore();

一般需要配合以上兩個方法，一定要以最初狀態為最根本的參照物。

因為看canvas的時間還比較短，太精美的圖像還碼不出來。

以後會寫更好玩兒的東西與大家分享。

最後還是想說一句話：

張大爺，我很想您。