我必须在画布上绘制3张图片，需要旋转2张图片。
I have to draw 3 images on the canvas and need to rotate 2 of the images.
图片类似 1.圆形直线 2.只是一条水平线 3.大圆形图像
The images are like 1. circular with a vertical straight line 2. just an horizontal line 3. Big circular image
我需要旋转画布中心的第1张2张图片。
I need to rotate the 1st 2 images in the center of the canvas.
var canvas = document.getElementById('NewImage'); var context = canvas.getContext('2d'); context.canvas.width = window.innerWidth; context.canvas.height = window.innerHeight*0.7; var imageObj = new Image(); var imageObj2 = new Image(); var imageObj3 = new Image(); imageObj.onload = function() { context.save(); context.translate(imageObj.width/2,imageObj.height/2); context.rotate(-10*Math.PI/180); //context.translate(-imageObj.width/2,-imageObj.height/2); context.drawImage(imageObj,-(imageObj.width/2),-(imageObj.height/2),context.canvas.width,context.canvas.height*0.85); context.restore(); context.save(); context.globalCompositeOperation="source-over"; context.translate(imageObj2.width/2,imageObj2.height/2); context.rotate(-10*Math.PI/180); context.translate(-imageObj2.width/2,-imageObj2.height/2); context.drawImage(imageObj2, x, y,context.canvas.width,6); context.restore(); //context.rotate(10*Math.PI/180); context.drawImage(imageObj3, 0, 0,context.canvas.width,context.canvas.height*0.9); }; imageObj.src = 'canvas/inner_circle_blackline_vertical.png'; imageObj2.src = 'canvas/horizontal.png'; imageObj3.src = 'canvas/outer_circle.png';当我尝试旋转时，图像不会在中心旋转。当第一张2张图片旋转时，它看起来像X符号。
When i try to rotate, the images are not rotating in center. when 1st 2 images rotates it has to look like "X" symbol.
我将如何在画布中心旋转。
How will i rotate in center of the canvas.
感谢：）
推荐答案按照设计，你的imageObj2和imageObj3将永远不会加载。
As designed, your imageObj2 and imageObj3 will never load.
这是一个通用的图像加载器，将加载所有的图像并将其存储在一个名为imgs []的数组。
Here is a generic image loader that will load all your images and store them in an array called imgs[].
当所有图像都已完全加载时，将调用render（）函数。
When all your images have fully loaded, the render() function will be called. That’s where you start drawing.
// This is an image loader // When render() is called, all your images are fully loaded var imgURLs = [ "dl.dropboxusercontent/u/139992952/stackoverflow/line.png", "dl.dropboxusercontent/u/139992952/stackoverflow/line.png", "dl.dropboxusercontent/u/139992952/stackoverflow/line.png"]; var imgs=[]; var imgCount=0; pre_load(); function pre_load(){ for(var i=0;i<imgURLs.length;i++){ var img=new Image(); imgs.push(img); img.onload=function(){ if(++imgCount>=imgs.length){ // images are now fully loaded render(); } } img.src=imgURLs[i]; } }在render（）中，您只需绘制图像。
In render(), you just draw your images.
由于重复执行相同的操作（旋转图像），您可以创建一个辅助函数来执行旋转的绘图。
Since the same action (rotating an image) is done repeatedly, you can create a helper function to do the rotated drawing. Here the helper function is drawImageAtAngle.
// draw the rotated lines on the canvas function render(){ var x=canvas.width/2; var y=canvas.height/2; drawImageAtAngle(imgs[0],x,y,-45); drawImageAtAngle(imgs[2],x,y,45); drawImageAtAngle(imgs[1],x,y,0); }这里是帮助函数，用于将提供的图像旋转到提供的角度： p>
Here the helper function that rotates a supplied image to a supplied angle:
function drawImageAtAngle(image,X,Y,degrees){ var radians=degrees*Math.PI/180; var halfWidth=image.width/2; var halfHeight=image.height/2; ctx.beginPath(); ctx.save(); ctx.translate(X,Y); ctx.rotate(radians); ctx.drawImage(image,-halfWidth,-halfHeight); ctx.restore(); }这里是代码和小提琴： jsfiddle/m1erickson/ZShWW/
Here is code and a Fiddle: jsfiddle/m1erickson/ZShWW/
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> <script type="text/javascript" src="code.jquery/jquery.min.js"></script> <style> body{ background-color: ivory; padding:10px;} canvas{border:1px solid red;} </style> <script> $(function(){ var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); // This is an image loader // When render() is called, all your images are fully loaded var imgURLs = [ "dl.dropboxusercontent/u/139992952/stackoverflow/line.png", "dl.dropboxusercontent/u/139992952/stackoverflow/line.png", "dl.dropboxusercontent/u/139992952/stackoverflow/line.png"]; var imgs=[]; var imgCount=0; pre_load(); function pre_load(){ for(var i=0;i<imgURLs.length;i++){ var img=new Image(); imgs.push(img); img.onload=function(){ if(++imgCount>=imgs.length){ // images are now fully loaded render(); } } img.src=imgURLs[i]; } } // draw the rotated lines on the canvas function render(){ var x=canvas.width/2; var y=canvas.height/2; drawImageAtAngle(imgs[0],x,y,-45); drawImageAtAngle(imgs[2],x,y,45); drawImageAtAngle(imgs[1],x,y,0); } function drawImageAtAngle(image,X,Y,degrees){ var radians=degrees*Math.PI/180; var halfWidth=image.width/2; var halfHeight=image.height/2; ctx.beginPath(); ctx.save(); ctx.translate(X,Y); ctx.rotate(radians); ctx.drawImage(image,-halfWidth,-halfHeight); ctx.restore(); } }); // end $(function(){}); </script> </head> <body> <p>This is the line image</p> <img src="dl.dropboxusercontent/u/139992952/stackoverflow/line.png"> <p>The line image rotated at center of canvas</p> <canvas id="canvas" width=300 height=300></canvas> </body> </html>更多推荐
在画布上旋转2幅图像
发布评论