使用javascript在HTML5 Canvas上手工绘制domo君

最近为了做一个游戏，需要在HTML5 canvas上绘制一个domo君，于是我自己用代码绘制了一个，效果如图所示
domo君 html5 canvas 绘制

那么如何来绘制呢?

其实就是把原来的形象拆解成矩形、圆形，多边形，使用合适的次序绘制并填充即可，大体分为以下几步：

1.绘制身体、头、腿，使用圆与矩形拼合填充

2.绘制眼睛，使用圆填充

3.绘制嘴巴，使用圆与矩形拼合填充

4.绘制牙齿，使用多边形并填充

实例代码如下

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=480">
<script type="text/javascript">
function draw(ctx, x, y, isUp) {
    // 保存初始
    ctx.save();
    ctx.translate(x, y);
    // 画身体
    var p1x = -40;
    var p1y = -88;
    ctx.fillStyle = "#6e4720";
    ctx.fillRect(p1x, p1y, 80, 80);
    // 画头左上角
    var p2x = -20;
    var p2y = -88;
    ctx.moveTo(p2x, p2y);
    ctx.arc(p2x, p2y, 20, 0, Math.PI * 2, false);
    ctx.fillStyle = "#6e4720";
    ctx.fill();
    // 画头正上方
    var p3x = -20;
    var p3y = -108;
    ctx.fillStyle = "#6e4720";
    ctx.fillRect(p3x, p3y, 40, 21);
    // 画头右上角
    var p4x = 20;
    var p4y = -88;
    ctx.moveTo(p4x, p4y);
    ctx.fillStyle = "#6e4720";
    ctx.arc(p4x, p4y, 20, 0, Math.PI * 2, true);
    ctx.fill();
    // 画左腿左下角
    var p5x = -32;
    var p5y = -8;
    ctx.moveTo(p5x, p5y);
    ctx.fillStyle = "#6e4720";
    ctx.arc(p5x, p5y, 8, Math.PI * 0.5, Math.PI, false);
    ctx.fill();
    // 画左腿中部
    ctx.fillStyle = "#6e4720";
    ctx.fillRect(p5x, p5y, 16, 8);
    // 画左腿右下角
    var p6x = -16;
    var p6y = -8;
    moveTo(p6x, p6y);
    ctx.fillStyle = "#6e4720";
    ctx.arc(p6x, p6y, 8, 0, Math.PI * 0.5, false);
    ctx.fill();
    // 画右腿左下部
    var p7x = 16;
    var p7y = -8;
    // 画右腿中部
    ctx.fillRect(p7x, p7y, 16, 8);
    ctx.moveTo(p7x, p7y);
    ctx.fillStyle = "#6e4720";
    ctx.arc(p7x, p7y, 8, Math.PI * 0.5, Math.PI, false);
    ctx.fill();
    // 画右腿右下部
    var p8x = 32;
    var p8y = -8;
    ctx.fillStyle = "#6e4720";
    ctx.arc(p8x, p8y, 8, 0, Math.PI * 0.5, false);
    ctx.fill();
    // 画左胳膊
    var p9x = -40;
    var p9y = -58;
    ctx.save();
    ctx.translate(p9x, p9y);
    if(isUp)
        ctx.rotate(-Math.PI / 3);
    else
        ctx.rotate(-Math.PI * 2/3);
    var p10x = 0;
    var p10y = -20;
    ctx.fillStyle = "#6e4720";
    ctx.fillRect(p10x, p10y, 20, 40);
    var p14x = 10;
    var p14y = -20;
    ctx.moveTo(p14x, p14y);
    ctx.fillStyle = "#6e4720";
    ctx.beginPath();
    ctx.arc(p14x, p14y, 10, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
    // 画右胳膊
    ctx.save();
    var p11x = 40;
    var p11y = -58;
    ctx.translate(p11x, p11y);
    if(isUp)
        ctx.rotate(Math.PI / 3);
    else
        ctx.rotate(Math.PI * 2/3);
    var p12x = -20;
    var p12y = -20;
    ctx.fillRect(p12x, p12y, 20, 40);
    var p13x = -10;
    var p13y = -20;
    ctx.moveTo(p13x, p13y);
    ctx.beginPath();
    ctx.arc(p13x, p13y, 10, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
    // 画左眼睛
    var p15x = -24;
    var p15y = - 8 - 80 - 4;
    ctx.fillStyle="#000000";
    ctx.moveTo(p15x, p15y);
    ctx.beginPath();
    ctx.arc(p15x, p15y, 4, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fill();
    // 画右眼睛
    var p16x = 24;
    var p16y = - 8 - 80 - 4;
    ctx.fillStyle="#000000";
    ctx.moveTo(p16x, p16y);
    ctx.beginPath();
    ctx.arc(p16x, p16y, 4, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fill();
    // 画嘴
    ctx.save();
    ctx.translate(0, -58);
    // 嘴.红色背景
    ctx.fillStyle = "#962215";
    var m1x = -20;
    var m1y = -15;
    ctx.fillRect(m1x, m1y, 40, 30);
    ctx.fillRect(m1x - 4, m1y, 4, 30);
    ctx.fillRect(m1x, m1y - 4, 40, 4);
    ctx.beginPath();
    ctx.arc(m1x, m1y, 4, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fill();
    var m2x = 20;
    var m2y = -15;
    ctx.fillRect(m2x, m2y, 4, 30);
    ctx.beginPath();
    ctx.arc(m2x, m2y, 4, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fill();
    var m3x = -20;
    var m3y = 15;
    ctx.fillRect(m3x, m3y, 40, 4);
    ctx.beginPath();
    ctx.arc(m3x, m3y, 4, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fill();
    var m4x = 20;
    var m4y = 15;
    ctx.beginPath();
    ctx.arc(m4x, m4y, 4, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fill();
    // 嘴.上牙
    var m5x = -18;
    var mty = -7;
    var m6x = -6;
    var m7x = 6;
    var m8x = 18;
    ctx.beginPath();
    ctx.moveTo(m1x, m1y - 4);
    ctx.arc(m1x, m1y, 4, Math.PI * 0.5, Math.PI, true);
    ctx.lineTo(m5x, mty);
    ctx.lineTo(-12, m1y);
    ctx.lineTo(m6x, mty);
    ctx.lineTo(0, m1y);
    ctx.lineTo(m7x, mty);
    ctx.lineTo(12, m1y);
    ctx.lineTo(m8x, mty);
    ctx.lineTo(m2x + 4, m2y);
    ctx.arc(m2x, m2y, 4, Math.PI * 2, Math.PI * 1.5, true);
    ctx.closePath();
    ctx.fillStyle = "#FFFFFF";
    ctx.fill();
    // 嘴.下牙
    ctx.beginPath();
    ctx.moveTo(m3x, m3y + 4);
    ctx.arc(m3x, m3y, 4, Math.PI * 0.5, Math.PI, false);
    ctx.lineTo(m5x, -mty);
    ctx.lineTo(-12, -m1y);
    ctx.lineTo(m6x, -mty);
    ctx.lineTo(0, m3y);
    ctx.lineTo(m7x, -mty);
    ctx.lineTo(12, m3y);
    ctx.lineTo(m8x, -mty);
    ctx.lineTo(m4x + 4, m4y);
    ctx.arc(m4x, m4y, 4, 0, Math.PI * 0.5, false);
    ctx.closePath();
    ctx.fillStyle = "#FFFFFF";
    ctx.fill();
    ctx.restore();
    // 返回初始
    ctx.restore();
}
function init() {
var zoom = 2;
var ctx = document.getElementById("canvas").getContext("2d");
    ctx.scale(zoom, zoom);
    var isUp = false;
    draw(ctx, 100, 150, isUp);
}
</script>
<body onload="init();">
<canvas id="canvas" width="400" height="400">
Your browser doesn't support the HTML5 element canvas.
</canvas>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

<!DOCTYPE html>

<html>

function draw(ctx, x, y, isUp) {

// 保存初始

ctx.save();

ctx.translate(x, y);

// 画身体

var p1x = -40;

var p1y = -88;

ctx.fillStyle = "#6e4720";

ctx.fillRect(p1x, p1y, 80, 80);

// 画头左上角

var p2x = -20;

var p2y = -88;

ctx.moveTo(p2x, p2y);

ctx.arc(p2x, p2y, 20, 0, Math.PI * 2, false);

ctx.fillStyle = "#6e4720";

ctx.fill();

// 画头正上方

var p3x = -20;

var p3y = -108;

ctx.fillStyle = "#6e4720";

ctx.fillRect(p3x, p3y, 40, 21);

// 画头右上角

var p4x = 20;

var p4y = -88;

ctx.moveTo(p4x, p4y);

ctx.fillStyle = "#6e4720";

ctx.arc(p4x, p4y, 20, 0, Math.PI * 2, true);

ctx.fill();

// 画左腿左下角

var p5x = -32;

var p5y = -8;

ctx.moveTo(p5x, p5y);

ctx.fillStyle = "#6e4720";

ctx.arc(p5x, p5y, 8, Math.PI * 0.5, Math.PI, false);

ctx.fill();

// 画左腿中部

ctx.fillStyle = "#6e4720";

ctx.fillRect(p5x, p5y, 16, 8);

// 画左腿右下角

var p6x = -16;

var p6y = -8;

moveTo(p6x, p6y);

ctx.fillStyle = "#6e4720";

ctx.arc(p6x, p6y, 8, 0, Math.PI * 0.5, false);

ctx.fill();

// 画右腿左下部

var p7x = 16;

var p7y = -8;

// 画右腿中部

ctx.fillRect(p7x, p7y, 16, 8);

ctx.moveTo(p7x, p7y);

ctx.fillStyle = "#6e4720";

ctx.arc(p7x, p7y, 8, Math.PI * 0.5, Math.PI, false);

ctx.fill();

// 画右腿右下部

var p8x = 32;

var p8y = -8;

ctx.fillStyle = "#6e4720";

ctx.arc(p8x, p8y, 8, 0, Math.PI * 0.5, false);

ctx.fill();

// 画左胳膊

var p9x = -40;

var p9y = -58;

ctx.save();

ctx.translate(p9x, p9y);

if(isUp)

ctx.rotate(-Math.PI / 3);

else

ctx.rotate(-Math.PI * 2/3);

var p10x = 0;

var p10y = -20;

ctx.fillStyle = "#6e4720";

ctx.fillRect(p10x, p10y, 20, 40);

var p14x = 10;

var p14y = -20;

ctx.moveTo(p14x, p14y);

ctx.fillStyle = "#6e4720";

ctx.beginPath();

ctx.arc(p14x, p14y, 10, 0, Math.PI * 2, true);

ctx.closePath();

ctx.fill();

ctx.restore();

// 画右胳膊

ctx.save();

var p11x = 40;

var p11y = -58;

ctx.translate(p11x, p11y);

if(isUp)

ctx.rotate(Math.PI / 3);

else

ctx.rotate(Math.PI * 2/3);

var p12x = -20;

var p12y = -20;

ctx.fillRect(p12x, p12y, 20, 40);

var p13x = -10;

var p13y = -20;

ctx.moveTo(p13x, p13y);

ctx.beginPath();

ctx.arc(p13x, p13y, 10, 0, Math.PI * 2, true);

ctx.closePath();

ctx.fill();

ctx.restore();

// 画左眼睛

var p15x = -24;

var p15y = - 8 - 80 - 4;

ctx.fillStyle="#000000";

ctx.moveTo(p15x, p15y);

ctx.beginPath();

ctx.arc(p15x, p15y, 4, 0, Math.PI * 2, true);

ctx.closePath();

ctx.fill();

// 画右眼睛

var p16x = 24;

var p16y = - 8 - 80 - 4;

ctx.fillStyle="#000000";

ctx.moveTo(p16x, p16y);

ctx.beginPath();

ctx.arc(p16x, p16y, 4, 0, Math.PI * 2, true);

ctx.closePath();

ctx.fill();

// 画嘴

ctx.save();

ctx.translate(0, -58);

// 嘴.红色背景

ctx.fillStyle = "#962215";

var m1x = -20;

var m1y = -15;

ctx.fillRect(m1x, m1y, 40, 30);

ctx.fillRect(m1x - 4, m1y, 4, 30);

ctx.fillRect(m1x, m1y - 4, 40, 4);

ctx.beginPath();

ctx.arc(m1x, m1y, 4, 0, Math.PI * 2);

ctx.closePath();

ctx.fill();

var m2x = 20;

var m2y = -15;

ctx.fillRect(m2x, m2y, 4, 30);

ctx.beginPath();

ctx.arc(m2x, m2y, 4, 0, Math.PI * 2);

ctx.closePath();

ctx.fill();

var m3x = -20;

var m3y = 15;

ctx.fillRect(m3x, m3y, 40, 4);

ctx.beginPath();

ctx.arc(m3x, m3y, 4, 0, Math.PI * 2);

ctx.closePath();

ctx.fill();

var m4x = 20;

var m4y = 15;

ctx.beginPath();

ctx.arc(m4x, m4y, 4, 0, Math.PI * 2);

ctx.closePath();

ctx.fill();

// 嘴.上牙

var m5x = -18;

var mty = -7;

var m6x = -6;

var m7x = 6;

var m8x = 18;

ctx.beginPath();

ctx.moveTo(m1x, m1y - 4);

ctx.arc(m1x, m1y, 4, Math.PI * 0.5, Math.PI, true);

ctx.lineTo(m5x, mty);

ctx.lineTo(-12, m1y);

ctx.lineTo(m6x, mty);

ctx.lineTo(0, m1y);

ctx.lineTo(m7x, mty);

ctx.lineTo(12, m1y);

ctx.lineTo(m8x, mty);

ctx.lineTo(m2x + 4, m2y);

ctx.arc(m2x, m2y, 4, Math.PI * 2, Math.PI * 1.5, true);

ctx.closePath();

ctx.fillStyle = "#FFFFFF";

ctx.fill();

// 嘴.下牙

ctx.beginPath();

ctx.moveTo(m3x, m3y + 4);

ctx.arc(m3x, m3y, 4, Math.PI * 0.5, Math.PI, false);

ctx.lineTo(m5x, -mty);

ctx.lineTo(-12, -m1y);

ctx.lineTo(m6x, -mty);

ctx.lineTo(0, m3y);

ctx.lineTo(m7x, -mty);

ctx.lineTo(12, m3y);

ctx.lineTo(m8x, -mty);

ctx.lineTo(m4x + 4, m4y);

ctx.arc(m4x, m4y, 4, 0, Math.PI * 0.5, false);

ctx.closePath();

ctx.fillStyle = "#FFFFFF";

ctx.fill();

ctx.restore();

// 返回初始

ctx.restore();

}

function init() {

var zoom = 2;

var ctx = document.getElementById("canvas").getContext("2d");

ctx.scale(zoom, zoom);

var isUp = false;

draw(ctx, 100, 150, isUp);

}

</script>

Your browser doesn't support the HTML5 element canvas.

</canvas>

</body>

</html>