<body> <!-- canvas画布的宽高设置需要使用width="500px" height="400px"属性,如果使用css会导致绘制内容变形 --> <canvas id="canvasId" width="500px" height="400px" style="background-color: antiquewhite;"> 低版本提示语,支持canvas标签的浏览器看不到 </canvas> <script> var canvas = document.getElementById('canvasId') // 获取2d画布 var ctx = canvas.getContext('2d') // 设置填充色 ctx.fillStyle='red' // 填充一个矩形 ctx.fillRect(10,20,100,100) console.log(ctx); console.log(canvas); </script> </body>
<canvas id="myCanvasId" width="500" height="500" style="background-color: antiquewhite;"> 请升级浏览器 </canvas> <script> var canvas = document.getElementById('myCanvasId') var ctx = canvas.getContext('2d') ctx.fillStyle = 'blue' ctx.fillRect(100, 100, 100, 100) var left = 100 setInterval(() => { // 1.清屏 ctx.clearRect(0, 0, 500, 500) // 2.更新 left++ // 3.渲染 ctx.fillRect(left, 100, 100, 100) }, 10); </script> </body>
<body> <canvas id="myCanvasId" width="500" height="500" style="background-color: antiquewhite;"> 请升级浏览器 </canvas> <script> var canvas = document.getElementById('myCanvasId') var ctx = canvas.getContext('2d') // 定义一个类 function Rect(x, y, w, h, color) { this.x = x this.y = y this.w = w this.h = h this.color = color } // 添加类方法 Rect.prototype.update = function () { this.x++; } Rect.prototype.render = function() { ctx.fillStyle=this.color ctx.fillRect(this.x, this.y, this.w, this.h) } // 实例化 var r1 = new Rect(10, 100, 100, 100, 'blue') var r2 = new Rect(10, 300, 100, 200, 'red') setInterval(() => { ctx.clearRect(0, 0, 500, 500) // 第一个对象 r1.update() r1.render() // 第二个对象 r2.update() r2.render() }, 10); </script> </body>
<body> <canvas id="myCanvasId" width="500" height="500" style="background-color: antiquewhite;"> 请升级浏览器 </canvas> <script> var canvas = document.getElementById('myCanvasId') var ctx = canvas.getContext('2d') console.log(ctx); // 画矩形填充 ctx.fillStyle='red' ctx.fillRect(50,100,100,100) // 画矩形框 ctx.strokeStyle='blue' ctx.strokeRect(200,100,100,100) // 画路径 // 1.打开路径 ctx.beginPath(); // 2.移动绘制点 ctx.moveTo(50, 400); // 3.描述行进路径 ctx.lineTo(100, 450); ctx.lineTo(200, 300); // 4.闭合路径 ctx.closePath(); // 5.绘制路径 // ctx.strokeStyle = 'brown' // ctx.stroke(); // 或 ctx.fillStyle = 'pink' ctx.fill(); // 画弧度 // 1.开启路径 ctx.beginPath() // 2.画圆弧 // 400, 400为起点, 50为半径, 0, 1为开始结束弧度(圆有2Pi个弧度约等于7个弧度), false为顺时针画; ctx.arc(400, 400, 50, 0, 1, false); // 3.绘制路径 // ctx.closePath() // stroke()画实际路径,fill()会自动加colsePath()画出的是闭合路径。 ctx.strokeStyle='green' ctx.stroke() </script> </body>