HTML5画布,绘制后缩放图像

前端之家收集整理的这篇文章主要介绍了HTML5画布,绘制后缩放图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试缩放已经绘制到画布中的图像.
这是代码
var canvas = document.getElementById('splash-container');
      var context = canvas.getContext('2d');
      var imageObj = new Image();

      imageObj.onload = function() {
        // draw image at its original size
        context.drawImage(imageObj,0);
      };
      imageObj.src = 'images/mine.jpeg';


        // Now let's scale the image.
        // something like...
        imageObj.scale(0.3,0.3);

我应该怎么做?

解决方法

你在想错了.将图像绘制到画布上后,它与imageObj对象没有任何关系.你对imageObj所做的一切都不会影响已经绘制的内容.如果要缩放图像,请执行 drawImage function
drawImage(imgObj,imgObj.width * 0.3,imgObj.height * 0.3)

如果您想要为缩放设置动画或者想要获得一些其他效果,这需要您以最大尺寸绘制图像,那么在绘制缩小的图像之前,您必须先进行clear it.

原文链接:https://www.f2er.com/html5/168532.html

猜你在找的HTML5相关文章