如何使用javascript在html5中的画布中绘制图片

Question

I am trying to create a mickey mouse picture in a canvas like below pict. 我正在尝试在如下图所示的画布中创建一个米老鼠图片。 but all I can manage is below using javascript and html5 但是我只能使用javascript和html5管理以下内容

 <html> <canvas id="gameCanvas" width="800" height="600"></canvas> <script> function draw_bordered_rect(context, x, y, w, h) { var colors = ['grey','red','black','green','orange','purple','yellow']; context.rect(x, y, w, h); context.fillStyle = "green"; context.fill(); context.lineWidth = 3; context.strokeStyle = "lightblue"; context.stroke(); canvasContext.font = '25pt Arial'; canvasContext.textAlign = 'center'; canvasContext.fillStyle = colors[x]; //canvasContext.fillStyle = "black"; canvasContext.fillText('ACTIVITY 1',canvas.width/2-2, 56); } window.onload = function() { canvas = document.getElementById('gameCanvas'); canvasContext = canvas.getContext('2d'); canvasContext.fillStyle = 'white'; canvasContext.fillRect(0, 0, canvas.width, canvas.height); draw_bordered_rect(canvasContext, 0, 0, 790, 70); draw_bordered_rect(canvasContext, 0, 520, 790, 70); canvasContext.fillStyle = 'grey'; canvasContext.fillRect(20, 150, 40, 40); canvasContext.fillStyle = 'orange'; canvasContext.fillRect(20, 200, 40, 40); canvasContext.fillStyle = 'purple'; canvasContext.fillRect(20, 250, 40, 40); canvasContext.fillStyle = 'magenta'; canvasContext.fillRect(20, 300, 40, 40); canvasContext.fillStyle = 'red'; canvasContext.fillRect(70, 150, 40, 40); canvasContext.fillStyle = 'green'; canvasContext.fillRect(70, 200, 40, 40); canvasContext.fillStyle = 'blue'; canvasContext.fillRect(70, 250, 40, 40); canvasContext.fillStyle = 'yellow'; canvasContext.fillRect(70, 250, 40, 40); canvasContext.fillStyle = 'black'; canvasContext.fillRect(70, 300, 40, 40); } </script> </html>

now my question is how can I add the mickey mouse picture into the canvas using html5? 现在我的问题是如何使用html5将米老鼠图片添加到画布中？

Answer 1

Just add the following code in your window.onload 只需在window.onload中添加以下代码

    base_image = new Image();
    base_image.src = 'pic1.png';
    base_image.onload = function(){
        canvasContext.drawImage(base_image, 100, 100);
    }

Here's a working solution. 这是一个可行的解决方案。 Hope it helps! 希望能帮助到你！

 function draw_bordered_rect(context, x, y, w, h) { var colors = ['grey','red','black','green','orange','purple','yellow']; context.rect(x, y, w, h); context.fillStyle = "green"; context.fill(); context.lineWidth = 3; context.strokeStyle = "lightblue"; context.stroke(); canvasContext.font = '25pt Arial'; canvasContext.textAlign = 'center'; canvasContext.fillStyle = colors[x]; //canvasContext.fillStyle = "black"; canvasContext.fillText('ACTIVITY 1',canvas.width/2-2, 56); } window.onload = function() { canvas = document.getElementById('gameCanvas'); canvasContext = canvas.getContext('2d'); canvasContext.fillStyle = 'white'; canvasContext.fillRect(0, 0, canvas.width, canvas.height); base_image = new Image(); base_image2 = new Image(); base_image.src = 'https://upload.wikimedia.org/wikipedia/en/d/d4/Mickey_Mouse.png'; base_image2.src = 'https://piratification.blob.core.windows.net/historyofpencils/picture-of-pink-pencil-eraser-small.jpg'; base_image.onload = function(){ canvasContext.drawImage(base_image, 100, 100); } base_image2.onload = function(){ canvasContext.drawImage(base_image2, 400, 100); } draw_bordered_rect(canvasContext, 0, 0, 790, 70); draw_bordered_rect(canvasContext, 0, 520, 790, 70); canvasContext.fillStyle = 'grey'; canvasContext.fillRect(20, 150, 40, 40); canvasContext.fillStyle = 'orange'; canvasContext.fillRect(20, 200, 40, 40); canvasContext.fillStyle = 'purple'; canvasContext.fillRect(20, 250, 40, 40); canvasContext.fillStyle = 'magenta'; canvasContext.fillRect(20, 300, 40, 40); canvasContext.fillStyle = 'red'; canvasContext.fillRect(70, 150, 40, 40); canvasContext.fillStyle = 'green'; canvasContext.fillRect(70, 200, 40, 40); canvasContext.fillStyle = 'blue'; canvasContext.fillRect(70, 250, 40, 40); canvasContext.fillStyle = 'yellow'; canvasContext.fillRect(70, 250, 40, 40); canvasContext.fillStyle = 'black'; canvasContext.fillRect(70, 300, 40, 40); }

 <canvas id="gameCanvas" width="800" height="600"></canvas>

如何使用javascript在html5中的画布中绘制图片

问题描述

1 个解决方案

解决方案1
-1 已采纳 2017-01-15 04:17:41

如何使用javascript在html5中的画布中绘制图片

问题描述

1 个解决方案

解决方案1 -1 已采纳 2017-01-15 04:17:41

解决方案1
-1 已采纳 2017-01-15 04:17:41