老师，我的问题是关于给描边和填充加颜色。
来源：4-1 Canvas图形变换之平移
慕斯0469344
2019-09-08 16:27:04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas</title>
<style>
canvas{background-color:lightblue;}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="800">
您的浏览器不支持canvas
</canvas>
<script>
//在此处写出代码
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.moveTo(300,50);
ctx.lineTo(370,200);
ctx.lineWidth = 5;
ctx.strokeStyle = '#ffff00';
ctx.stroke();
ctx.beginPath();
ctx.moveTo(500,50);
ctx.lineTo(420,200);
ctx.lineWidth = 5;
ctx.strokeStyle = '#ffff00';
ctx.stroke();
ctx.beginPath();
ctx.strokeRect(300,200,200,100);
ctx.fillStyle = '#ffffcc';
ctx.fill();
ctx.beginPath();
ctx.arc(350,230,12,0,2*Math.PI,true);
ctx.fillStyle = '#000';
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.arc(450,230,12,0,2*Math.PI,true);
ctx.fillStyle = '#000';
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.strokeRect(370,260,60,20);
ctx.fillStyle = '#ffff00';
ctx.fill();
ctx.beginPath();
ctx.strokeRect(280,220,20,40);
ctx.fillStyle = '#ffff00';
ctx.fill();
ctx.beginPath();
ctx.strokeRect(500,220,20,40);
ctx.fillStyle = '#f00';
ctx.fill();
ctx.beginPath();
ctx.strokeRect(350,300,100,220);
ctx.beginPath();
ctx.strokeRect(130,375,220,20);
ctx.beginPath();
ctx.strokeRect(450,375,220,20);
ctx.beginPath();
ctx.strokeRect(360,520,20,220);
ctx.beginPath();
ctx.strokeRect(410,520,20,220);
</script>
</body>
</html>老师，您看我为什么没有给描边和填充加上颜色呢？
写回答
1回答
-
需要设置fillRect填充矩形
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas</title> <style> canvas{background-color:lightblue;} </style> </head> <body> <canvas id="canvas" width="800" height="800"> 您的浏览器不支持canvas </canvas> <script> //在此处写出代码 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // 左边天线 ctx.moveTo(300,50); ctx.lineTo(370,200); ctx.lineWidth = 5; ctx.strokeStyle = '#ffff00'; ctx.stroke(); // 右侧天线 ctx.beginPath(); ctx.moveTo(500,50); ctx.lineTo(420,200); ctx.lineWidth = 5; ctx.strokeStyle = '#ffff00'; ctx.stroke(); // 脸部 ctx.beginPath(); ctx.strokeRect(300,200,200,100); ctx.fillStyle="#ffffcc"; ctx.fillRect(300,200,200,100); ctx.fill(); // 左侧眼睛 ctx.beginPath(); ctx.arc(350,230,12,0,2*Math.PI,true); ctx.fillStyle = '#000'; ctx.fill(); ctx.stroke(); // 右侧的眼睛 ctx.beginPath(); ctx.arc(450,230,12,0,2*Math.PI,true); ctx.fillStyle = '#000'; ctx.fill(); ctx.stroke(); // 嘴巴 ctx.beginPath(); ctx.strokeRect(370,260,60,20); ctx.fillStyle = '#ffff00'; ctx.fillRect(370,260,60,20); ctx.fill(); // 左侧耳朵 ctx.beginPath(); ctx.strokeRect(280,220,20,40); ctx.fillRect(280,220,20,40); ctx.fillStyle = '#ffff00'; // 右侧耳朵 ctx.fill(); ctx.beginPath(); ctx.strokeRect(500,220,20,40); ctx.fillStyle = '#f00'; ctx.fillRect(500,220,20,40); ctx.fill(); // 身体 ctx.beginPath(); ctx.strokeRect(350,300,100,220); ctx.fillStyle = 'blue'; ctx.fillRect(350,300,100,220); ctx.fill(); //左臂 ctx.beginPath(); ctx.strokeRect(130,375,220,20); ctx.fillStyle = 'green'; ctx.fillRect(130,375,220,20); ctx.fill(); // 右臂 ctx.beginPath(); ctx.strokeRect(450,375,220,20); ctx.fillStyle = 'green'; ctx.fillRect(450,375,220,20); ctx.fill(); // 左腿 ctx.beginPath(); ctx.strokeRect(360,520,20,220); ctx.fillStyle = 'pink'; ctx.fillRect(360,520,20,220); ctx.fill(); // 右腿 ctx.beginPath(); ctx.strokeRect(410,520,20,220); ctx.fillStyle = 'pink'; ctx.fillRect(410,520,20,220); ctx.fill(); </script> </body> </html>希望可以帮到你！
0
相似问题