HTML
<!DOCTYPE html>
<html> <head> <title>canvas叮当猫</title> </head> <body> <canvas id="canvas" width="800px" height="1000px">您的浏览器不支持canvas,请升级或者更换其他浏览器!</canvas> </body> </html>
CSS
html {
background : #fff;}
JS
function mlog(log){
console.log("Info: "+log);
};function zuobiao(ctx, width, height){
ctx.fillStyle ="black"; for(var j = 0; j <= height; j+=50){ ctx.lineWidth = 1; ctx.lineStyle = "red"; ctx.beginPath(); ctx.moveTo(0,j); ctx.lineTo(width,j); ctx.stroke(); } for(var i = 0; i <= width; i+=50){ ctx.lineWidth = 1; ctx.lineStyle = "#FF0000"; ctx.beginPath(); ctx.moveTo(i,0); ctx.lineTo(i,height); ctx.stroke(); } for(var i = 0; i <= width; i+=50){ for(var j = 0; j <= height; j+=50){ ctx.font="12px Arill"; ctx.beginPath(); ctx.fillText(i+","+j, i, j); ctx.stroke(); } }}(function(){
mlog("Hi,I'm vanliga!"); var ctx = init(); //左手 ctx.lineWidth = 9; ctx.lineStyle="black"; ctx.fillStyle = "#FFFFFF"; ctx.beginPath(); ctx.arc(654, 543, 52, 0, 2*Math.PI, true); ctx.stroke(); ctx.fill(); //双脚 BezierEllipse2(ctx, 270, 720, 98, 52, 5, "black", ""); BezierEllipse2(ctx, 530, 720, 98, 52, 5, "black", ""); //身体 ctx.lineWidth = 9; ctx.lineStyle="black"; ctx.lineCap = "around"; ctx.fillStyle = "#00A0E9"; ctx.beginPath(); ctx.moveTo(568,445); ctx.quadraticCurveTo(630,478,650,500); ctx.quadraticCurveTo(650,559,600,550); ctx.quadraticCurveTo(579,540,550,518); ctx.quadraticCurveTo(553,510,550,480); ctx.quadraticCurveTo(553,510,550,518); ctx.quadraticCurveTo(557,510,548,650); ctx.quadraticCurveTo(579,680,570,700); ctx.quadraticCurveTo(500,720,440,700); ctx.quadraticCurveTo(400,650,360,700); ctx.quadraticCurveTo(300,720,230,700); ctx.quadraticCurveTo(224,675,250,650); ctx.quadraticCurveTo(253,510,259,480); ctx.quadraticCurveTo(253,510,255,520); ctx.quadraticCurveTo(253,510,100,400); ctx.quadraticCurveTo(120,360,150,350); ctx.quadraticCurveTo(203,380,220,375); ctx.quadraticCurveTo(203,380,568,445); ctx.stroke(); ctx.fill(); BezierEllipse2(ctx, 400, 600, 110, 71, 5, "#FFFFFF", "fill"); BezierEllipse2(ctx, 400, 600, 110, 71, 5, "black", ""); ctx.lineWidth = 4; ctx.beginPath(); ctx.moveTo(325,600); ctx.quadraticCurveTo(400,610,475,600); ctx.quadraticCurveTo(400,700,325,600); ctx.stroke(); //脸 ctx.lineWidth = 5; ctx.lineStyle="black"; ctx.fillStyle = "#00A0E9"; ctx.beginPath(); ctx.arc(400, 300, 200, 0, 2*Math.PI, true); ctx.fill(); ctx.stroke(); ctx.lineWidth = 5; ctx.lineStyle="black"; ctx.fillStyle = "#FFFFFF"; ctx.beginPath(); ctx.arc(400, 340, 160, 0, 2*Math.PI, true); ctx.fill(); ctx.stroke(); //眼睛 BezierEllipse2(ctx, 345, 200, 50, 65, 5, "#FFFFFF", "fill"); BezierEllipse2(ctx, 345, 200, 50, 65, 5, "black", ""); BezierEllipse2(ctx, 455, 200, 50, 65, 5, "#FFFFFF", "fill"); BezierEllipse2(ctx, 455, 200, 50, 65, 5, "black", "");BezierEllipse2(ctx, 365, 210, 20, 30, 5, "#000", "fill");
BezierEllipse2(ctx, 435, 210, 20, 30, 5, "#000", "fill");BezierEllipse2(ctx, 375, 210, 8, 15, 5, "#FFFFFF", "fill");
BezierEllipse2(ctx, 425, 210, 8, 15, 5, "#FFFFFF", "fill");//鼻子
ctx.lineWidth = 5; ctx.lineStyle="black"; ctx.fillStyle = "#E60012"; ctx.beginPath(); ctx.arc(400, 280, 40, 0, 2*Math.PI, true); ctx.fill(); ctx.stroke();ctx.fillStyle = "#FFFFFF";
ctx.beginPath(); ctx.arc(390, 270, 16, 0, 2*Math.PI, true); ctx.fill();ctx.beginPath();
ctx.moveTo(400, 320); ctx.lineTo(400, 460); ctx.stroke();//嘴
ctx.lineWidth = 5; ctx.lineStyle="black"; ctx.lineCap = "round"; ctx.beginPath(); ctx.moveTo(280,410); ctx.bezierCurveTo(360,480,440,480,520,410); ctx.stroke();//左胡子
ctx.moveTo(360,320); ctx.lineTo(270,260); ctx.stroke(); ctx.moveTo(360,350); ctx.lineTo(250,340); ctx.stroke(); ctx.moveTo(360,380); ctx.lineTo(260,400); ctx.stroke();//右胡子
ctx.moveTo(440,320); ctx.lineTo(530,260); ctx.stroke(); ctx.moveTo(440,350); ctx.lineTo(550,340); ctx.stroke(); ctx.moveTo(440,380); ctx.lineTo(540,400); ctx.stroke(); //围巾 ctx.lineWidth = 7; ctx.lineStyle="black"; ctx.fillStyle = "#E60012"; ctx.beginPath(); ctx.moveTo(240,427); ctx.quadraticCurveTo(400,530,560,427); ctx.quadraticCurveTo(570,437,560,447); ctx.quadraticCurveTo(400,560,240,450); ctx.quadraticCurveTo(230,437,242,427); ctx.stroke(); ctx.fill(); //铃铛 ctx.lineWidth = 9; ctx.lineStyle="black"; ctx.fillStyle = "#FDD000"; ctx.beginPath(); ctx.arc(400, 530, 40, 0, 2*Math.PI, true); ctx.stroke(); ctx.fill(); ctx.lineWidth = 8; ctx.lineStyle="black"; ctx.lineCap = "around"; ctx.fillStyle = "#FDD000"; ctx.beginPath(); ctx.moveTo(365,510); ctx.quadraticCurveTo(400,498,435,510); ctx.quadraticCurveTo(450,510,445,518); ctx.quadraticCurveTo(400,505,355,518); ctx.quadraticCurveTo(350,510,365,510); ctx.stroke(); ctx.fill(); ctx.lineWidth = 8; ctx.lineStyle="black"; ctx.fillStyle = "#7D6B56"; ctx.beginPath(); ctx.arc(400, 542, 8, 0, 2*Math.PI, true); ctx.stroke(); ctx.fill(); ctx.lineWidth = 5; ctx.lineStyle="black"; ctx.beginPath(); ctx.moveTo(400, 554); ctx.lineTo(400, 570); ctx.stroke(); //右手 ctx.lineWidth = 9; ctx.lineStyle="black"; ctx.fillStyle = "#FFFFFF"; ctx.beginPath(); ctx.arc(100, 350, 52, 0, 2*Math.PI, true); ctx.stroke(); ctx.fill();//zuobiao(ctx, 800, 1000);})(); function init(){ var can = document.getElementById("canvas"); //can.style.border = "1px solid red"; var ctx = can.getContext("2d"); return ctx;}//椭圆的绘制方法
/*context为Canvas的2D绘图环境对象，x为椭圆中心横坐标，y为椭圆中心纵坐标，a为椭圆横半轴长，b为椭圆纵半轴长*/function BezierEllipse2(ctx, x, y, a, b, lineWidth, color, method){ var k = .5522848, ox = a * k, // 水平控制点偏移量 oy = b * k; // 垂直控制点偏移量 if(method == "fill"){ ctx.fillStyle = color; } else{ ctx.lineWidth = lineWidth; ctx.storkeStyle = color; } ctx.beginPath(); //从椭圆的左端点开始顺时针绘制四条三次贝塞尔曲线 ctx.moveTo(x - a, y); ctx.bezierCurveTo(x - a, y - oy, x - ox, y - b, x, y - b); ctx.bezierCurveTo(x + ox, y - b, x + a, y - oy, x + a, y); ctx.bezierCurveTo(x + a, y + oy, x + ox, y + b, x, y + b); ctx.bezierCurveTo(x - ox, y + b, x - a, y + oy, x - a, y); ctx.closePath(); if(method == "fill"){ ctx.fill(); } else{ ctx.stroke(); }};