html吧 关注：182,181贴子：1,339,037
- 9回复贴，共1页
<body>
<canvas id="myCanvas" width="400px" height="400px" style="background: blanchedalmond;"></canvas>
<button onclick="juxing()">矩形</button>
<button onclick="sanjiaoxing()">三角形</button>
<script type="text/javascript">
function juxing(){
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000"; //填充颜色
cxt.fillRect(0,0,150,75); //前两个开始位置，后两个宽高
}
function sanjiaoxing(){
var canvas=document.getElementById("myCanvas");
var cxt=canvas.getContext("2d");
cxt.beginPath();
cxt.moveTo(250,50);
cxt.lineTo(200,200);
cxt.lineTo(300,300);
cxt.closePath();
cxt.strokeStyle="red";
cxt.stroke();
}
</script>
</body>
<canvas id="myCanvas" width="400px" height="400px" style="background: blanchedalmond;"></canvas>
<button onclick="juxing()">矩形</button>
<button onclick="sanjiaoxing()">三角形</button>
<script type="text/javascript">
function juxing(){
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000"; //填充颜色
cxt.fillRect(0,0,150,75); //前两个开始位置，后两个宽高
}
function sanjiaoxing(){
var canvas=document.getElementById("myCanvas");
var cxt=canvas.getContext("2d");
cxt.beginPath();
cxt.moveTo(250,50);
cxt.lineTo(200,200);
cxt.lineTo(300,300);
cxt.closePath();
cxt.strokeStyle="red";
cxt.stroke();
}
</script>
</body>
希望有帮到你
