html5 canvas缩放变换

最新推荐文章于 2022-08-06 15:20:20 发布
最新推荐文章于 2022-08-06 15:20:20 发布
阅读量157 收藏
点赞数
文章标签： xhtml javascript ViewUI 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图像缩放</title>
<script src="js/modernizr.js"></script>
</head>

<body>
<script type="text/javascript">
window.addEventListener('load',eventWindowLoaded,false);
function eventWindowLoaded(){
    canvasApp();
}
function canvasSupport(){
    return Modernizr.canvas;
}
function canvasApp(){
    if(!canvasSupport()){
        return;
    }else{
        var theCanvas = document.getElementById('canvas')
        var context = theCanvas.getContext("2d")

    }
    drawScreen();
    function drawScreen(){
        
        
        context.setTransform(1,0,0,1,0,0);
        var x = 100;
        var y = 100;
        var width = 50;
        var height = 50;
        context.translate(x+.5*width,y+.5*height);
        context.scale(2,2);//横，纵
        context.fillStyle="red";
        context.fillRect(-.5*width,-.5*height,width,height);
        
    }
    
}


</script>
<canvas id="canvas" width="500" height="500">
你的浏览器无法使用canvas
小白童鞋；你的支持是我最大的快乐！！
</canvas>
</body>
</html>

 

weixin_34320159
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生JavaScript + Canvas实现图片局部放大器
翾的博客
04-26 3240
文章目录1. 效果图2. 原理2.1. 拖拽放大2.2. hover放大3. 代码 1. 效果图 有两种放大模式，分别为拖拽放大以及单纯的hover放大，已下是效果图： 2. 原理 两种局部放大效果主要使用的均为canvas的getImageData以及putImageData。 （以上两个api详细介绍可以点击蓝色链接，跳转到MDN查看） 操纵getImageData函数返回的ImageDa...
HTML5 canvas炫酷拖拽圆球效果
06-05
HTML5 canvas炫酷拖拽圆球效果，可拖拽、可生成新的小球。
Canvas缩放变化
Wangdanting123的博客
07-02 626
Canvas缩放变化
canvas图像绘制（图像放大、缩小、拖动和截图）
qq_39404437的博客
08-06 2万+
1、canvas略解林大大又来更新啦~这次主要做的是关于canvas图像绘制的部分，要实现的功能主要是绘制、对canvas的放大以及那我们先来大概了解下canvas：1、canvas略解宽高是必须加上的，当然你也可以选择动态宽高，可以设置宽高百分比喔，canvas用于在页面上绘制图像（可以是自己的图片，也可以绘制自定义矢量图形：矩形等），其实我们不用担心大量的重绘canvas，现在浏览器完全扛得住这压力，非常流畅丝滑。
详解如何用HTML5 Canvas API控制图片的缩放变换
09-28
总的来说，HTML5 Canvas API 提供了丰富的图形操作功能，包括图像的缩放变换。通过JavaScript，我们可以实现交互式的图像缩放，让用户体验更佳。理解`context.scale()`方法以及如何结合鼠标事件处理坐标转换，对于...
HTML5 canvas基本绘图之图形变换
09-27
- 缩放变换：context.scale(x, y)方法用于按比例缩放绘制的图形。x为x轴的缩放比例，y为y轴的缩放比例。 - 旋转变换：context.rotate(angle)方法用于旋转图形，angle参数表示旋转的角度，以弧度为单位。 状态保存与...
深入解析HTML5 Canvas控制图形矩阵变换的方法
09-28
同样地，我们可以通过修改a和d来实现缩放变换，修改e和f来实现位移变换。 除了transform()方法，Canvas还提供了其他几个方便的API来进行常见的矩阵变换： - translate(x, y)：把坐标原点移动到(x, y)的位置。 - ...
html5 canvas酷炫3D文字变换动画特效
11-06
在“html5 canvas酷炫3D文字变换动画特效”这个主题中，我们将深入探讨如何利用Canvas API创建引人注目的3D文字动画效果。 1. **HTML5 Canvas基础** - HTML5 Canvas是一个基于矢量图形的画布，通过JavaScript来...
Html5 canvas学习5-图形变形：缩放 旋转 平移 变形
5big的博客
12-21 1万+
在canvas对当前绘图对象进行变形时，其中心点是画布(0,0)的坐标原点。1.缩放缩放context.scale(x,y) x:x坐标轴按x比例缩放 y:y坐标轴按y比例缩放 比如1表示不缩放、0.5表示缩小50%、2.3表示放大2.3倍。 例子：<script> var c = document.getElementById("myCanvas"); var ctx = c.getConte
canvas scale()画布缩放的使用
热门推荐
dayewandou的博客
10-15 4万+
前两天把canvas的translate()和rotate()的方法都介绍了下，今天就来说说scale()scale() 方法缩放当前绘图，更大或更小。 注释：如果您对绘图进行缩放，所有之后的绘图也会被缩放。定位也会被缩放。如果您 scale(2,2)，那么绘图将定位于距离画布左上角两倍远的位置。 scale(x,y) 参数：x：X表示横轴方向上缩放倍数 y：Y表示纵轴方
HTML5 canvas标签的全屏、退出全屏，canvas中显示的缩放、移动，小坑盘点
可视化和机器学习
09-26 8110
选择任意标签全屏显示，这儿是canvas，触发函数绑在按钮上： 此处没坑 $('#tab_fullScreen').click(function(){ fullScreen(); }); function fullScreen() { var element = document.getElementById('tab_canvas'),method = "RequestFul
canvas动画之二 -- 创建动态粒子网格动画
SweetoDream
12-13 1万+
最近看到一个粒子网格动画挺炫的，自己也就做了一个，当背景挺不错的。CSDN不能上传超过2M的图片，所以就简单截了一个静态图片：可以点击这里查看动画.下面就开始说怎么实现这个效果吧： 首先当然是添加一个canvas了：<canvas id="canvas"></canvas>下面是样式：<style> #canvas{ position: absolute;
canvas图片压缩，局部放大，像素处理
05-31 422
直接上代码：（具体看注释） 需要引用jquery.min.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia...
canvas 变形记——移动、旋转、缩放、变形
Wanan
06-21 4736
canvas 有几个变形形式：移动、旋转、缩放、变形。在做变形之前先保存状态是一个良好的习惯。大多数情况下，调用 restore 方法比手动恢复原先的状态要简单得多。又，如果你是在一个循环中做位移但没有保存和恢复 canvas 的状态，很可能到最后会发现怎么有些东西不见了，那是因为它很可能已经超出 canvas 范围以外了。1、移动 Translate translate用来移动 canvas 和它
Canvas 缩放(scale())
houyanhua1的专栏
04-15 2505
demo.html：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; canvas {
说说 Canvas 的缩放功能
读万卷书，行万里路
08-23 6430
使用 scale() 方法可以缩放当前绘图。语法：context.scale(scalewidth,scaleheight);。 参数 描述 scalewidth 缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推) scaleheight 缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, 依次类推) context.strokeRect(5,5,25,15); context.scale(2,2); context.strokeR
深入探索HTML5 Canvas技术
"HTML5 Canvas是HTML5中一个重要的特性，用于在网页上进行动态图形绘制。本书《HTML5 Canvas》由Steve Fulton和Jeff Fulton撰写，深入探讨了如何利用这个技术实现网页上的原生互动性和动画效果。" HTML5 Canvas是一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值