用html5画卡通人物源代码,用canvas画一个卡通人物!!

用canvas画一个卡通人物!!

发布时间：2018-05-29 16:54,

浏览次数：1191

, 标签：

canvas

html:

css:

canvas {

border: 2px solid #08A573;

background-size: 100% 250%;

background-position: center bottom;

}

js:

var canvas = document.getElementById('canvas'),

ctx = canvas.getContext('2d');

ctx.translate(20, 20);

//右手

lineGradient(ctx, 62, 120, 164, 267, '#dcc0b5', '#e3c2bd', '#e0beb2',

'#e7c7bc');

ctx.moveTo(205, 237);

ctx.quadraticCurveTo(140, 180, 113, 162);

ctx.quadraticCurveTo(118, 150, 116, 142);

ctx.quadraticCurveTo(125, 129, 111, 129);

ctx.quadraticCurveTo(100, 130, 100, 154);

ctx.quadraticCurveTo(98, 122, 90, 120);

ctx.quadraticCurveTo(78, 120, 84, 155);

ctx.quadraticCurveTo(80, 155, 80, 150);

ctx.quadraticCurveTo(70, 110, 60, 125);

ctx.quadraticCurveTo(60, 130, 65, 160);

ctx.quadraticCurveTo(65, 162, 62, 160);

ctx.quadraticCurveTo(50, 135, 40, 135);

ctx.quadraticCurveTo(30, 140, 52, 170);

ctx.quadraticCurveTo(48, 172, 47, 170);

ctx.quadraticCurveTo(30, 160, 24, 165);

ctx.quadraticCurveTo(20, 175, 45, 182);

ctx.lineTo(49, 188);

ctx.quadraticCurveTo(60, 250, 120, 292);

ctx.quadraticCurveTo(190, 320, 205, 237);

ctx.fill();

ctx.stroke();

ctx.beginPath();

ctx.moveTo(92, 155);

ctx.quadraticCurveTo(75, 150, 52, 170);

ctx.quadraticCurveTo(60, 165, 74, 169);

ctx.stroke();

lineGradient(ctx, 131, 167, 55, 206, '#7c3023', '#a71c15', '#a71c15',

'#8d120d');

ctx.moveTo(125, 160);

ctx.quadraticCurveTo(82, 152, 49, 195);

ctx.quadraticCurveTo(54, 210, 55, 216);

ctx.quadraticCurveTo(90, 180, 137, 175);

ctx.quadraticCurveTo(125, 160, 125, 160);

ctx.fill();

ctx.stroke();

//衣服

ctx.translate(-20, -20);

lineGradient(ctx, 169, 276, 422, 457, '#ddd6c6', '#d4d6c8', '#d4d5c5',

'#cad5c4');

ctx.moveTo(203, 258);

ctx.quadraticCurveTo(135, 265, 97, 306);

ctx.quadraticCurveTo(75, 310, 80, 319);

ctx.quadraticCurveTo(244, 397, 336, 528);

ctx.quadraticCurveTo(426, 443, 390, 343);

ctx.fill();

ctx.stroke();

//左手

lineGradient(ctx, 350, 400, 578, 512, '#d9bcb6', '#dfbdb1', '#e1bfb5',

'#debeb3');

ctx.moveTo(397, 350);

ctx.bezierCurveTo(335, 360, 320, 500, 382, 472);

ctx.quadraticCurveTo(480, 520, 494, 490);

ctx.q