canvas怎么在画的园中填充图片

2025-10-01 11:39:49

1、这里的话我直接给大家代码吧！<!DOCTYPE HTML><head><title>this is a dice game!!!</title><style>.btn-cls{position:absolute;top:400px;left:250px;}

canvas怎么在画的园中填充图片

2、</style></head><body><canvas id="canvas" width="600" height="600">your browser doesn't support the HTML5 element canvas.</canvas>

canvas怎么在画的园中填充图片

3、<button id="btn" class="btn-cls" onclick="Throw()" >开始投掷</button><script>var ctx; // canvas上下文var point1,point2;ctx = document.getElementById('canvas').getContext('2d');// 绘制画布ctx.strokeRect(0,0,600,600);

canvas怎么在画的园中填充图片

4、// 绘制两个骰子ctx.strokeRect(100,100,150,150);ctx.strokeRect(350,100,150,150);function Throw(){ // 投掷按钮point1 = Math.ceil(Math.random() * 6);point2 = Math.ceil(Math.random() * 6);DrawPoint(point1,point2);}

canvas怎么在画的园中填充图片

5、function DrawPoint(drawPoint1,drawPoint2){ // 绘制骰子上面的点ctx.clearRect(110,110,130,130);ctx.beginPath();ctx.arc(135,215,5,0,2 * Math.PI);ctx.arc(215,215,5,0,2 * Math.PI);ctx.arc(215,135,5,0,2 * Math.PI);ctx.fillStyle = "block";ctx.closePath();ctx.fill();}</script>

canvas怎么在画的园中填充图片

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。