H5canvas加载图片·绘制像素图·旋转平移缩放图片等等学习实践

最新推荐文章于 2024-03-05 16:45:11 发布
最新推荐文章于 2024-03-05 16:45:11 发布
阅读量3.8k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kellen_f/article/details/53548291
版权
 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas高级功能实现</title>
</head>
<body>
<canvas id="canvas1" width="1000" height="1000"></canvas>

</body>
<script>

/*显示图像*/
var k=document.getElementById("canvas1");
var kellen=k.getContext("2d");
var disk=new Image();
disk.src="../img/zhuanpan.png";
disk.οnlοad=function(){
kellen.drawImage(disk,300,100,400,400);
}
/*创建像素对象*/
   var imagData=kellen.createImageData(200,200);
   for(var i=0;i<200*200*4;i+=4)
   {
    imagData.data[i]=0;
    imagData.data[i+1]=0;
    imagData.data[i+2]=255;
    imagData.data[i+3]=255;
   }
kellen.putImageData(imagData,0,0);
/*把图片反色*/
 
   for(var i=0;i<200*200*4;i+=4)
   {
    imagData.data[i]=255-imagData.data[i];
    imagData.data[i+1]=255-imagData.data[i+1];
    imagData.data[i+2]=255-imagData.data[i+2];
   
   }
   kellen.putImageData(imagData,0,200);
/*平移旋转缩放*/
 
       
   kellen.strokeRect(200,0,50,50);
   kellen.save();
   kellen.translate(50,0);
   kellen.strokeRect(200,0,50,50);
   kellen.translate(-50,0);
   kellen.restore();
  
   kellen.save();
   kellen.translate(50,0);//平移画布
   kellen.rotate(45*Math.PI/180);//旋转画布
   kellen.strokeRect(200,0,50,50);
   kellen.rotate(-45*Math.PI/180);
   kellen.translate(-50,0);
   kellen.restore();
   

   /*缩放的就不写了，没意思了这个*/

            /*平移旋转这些主要是靠移动画布来实现，感觉很麻烦。。。但是大家都这么干，希望以后可以推出方面的函数*/

   /*新图绘制默认会覆盖旧图，否则用canvas.globalCompositeOperation值来调节.

</script>
</html>
CV伍六七
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html变形(包含旋转和斜切,transform旋转，平移，缩放，扭曲 斜切
weixin_42509815的博客
06-29 2451
transform 改变rotate 旋转translate 位移scale 缩放skew 斜切变形记得兼容性：-webkit--moz--ms--o-transform: rotate(Xdeg,Ydeg);deg 表示角度 X轴正半轴为0deg，顺时针旋转值越来越大。transform-origin( X ,Y ); 设置对象旋转的中心点，如果没设置该值，默认transform-orig...
html5中的画布canvas---画出弧线、旋转的图形
大前端
06-08 2671
在做旋转操作之前一定要理解一句话：旋转的是画布的坐标系而不是图形本身，好了，理解了这一句话后，接下来的就很简单了。 首先认识一下画圆的坐标： var cxt=document.getElementById('demo').getContext("2d"); cxt.beginPath(); cxt.arc(100,100,50,Math.PI*0.75,Math.PI*1.75,
Javascript实现图片预加载【回调函数，多张图片】
taro
06-18 689
        使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中，需要图片全部加载完成方可运行动画效果。此时程序中就会涉及多张图片预加载代码。当接二连三的案例中都涉及图片预加载时，就需要考虑把这个功能封装为一个通用方法。   （1）下面为JS实现图片预加载方法loadImages()：   //实现一系列图片的预加载 //参数sources:图片信息关联...
HTML5实现图片拖动，旋转，放大，拉伸等特效
11-04
HTML5实现图片拖动，旋转，放大，拉伸等特效 效果详情参考http://www.xwcms.net/webAnnexImages/fileAnnex/20131031/91857/index.html
canvas图片旋转
最新发布
karl1966的博客
03-05 422
移动canvas画布位置到（100,100），画一张图片，注意canvas的坐标是以左上角为中心点，向右下展开，水平方向为x轴，竖直方向为y轴。这里一定要注意，canvas的style的宽高，和canvas实例的宽高需要相同，否则创建出来的canvas内容会按比例转换，比如。按照代码来说，希望canvas移动到（100,100）的位置，并且创建一个50*50的方块，实际上创建的结果是这样的。canvas存在默认宽高，注意是canvas的实例宽高，默认300*150，不是style样式宽高，
h5单手实现图片的拖动、旋转、缩放
qq_37942845的博客
01-26 6579
前一段时间做了微信小程序上的单手图片的拖动、旋转、缩放，没想到有这么多人需要这个功能，有的同学问我能不能做一个h5版的？所以就有了这篇文章 前提：本文不适合vue、angular、react框架、仅适用原生开发或者jquery库，因为双向数据绑定的已经在微信上说过了。 原理和微信小程序大致相同，只不过不在微信的框架下，没有了双向数据绑定，一切数据的同步展示都需要自己做效果展示。 首先还是定义...
html5实现坐标旋转的方法,HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
weixin_42100129的博客
05-31 588
HTML5 Canvas中提供了实现图形平移，旋转，放缩的API。平移(translate)平移坐标translate(x, y)意思是把(0,0)坐标平移到(x, y)，原来的(0,0)坐标则变成(-x, -y)图示如下：任何原来的坐标点p(ox, oy)在translate之后的坐标点为p(ox-x, oy-y),其中点(x, y)为平移点坐标translate(x, y)。代码演示：复制代...
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
09-28
主要介绍了通过HTML5 Canvas实现图片的平移及旋转变化的方法,其中旋转讲解的是配合平移坐标系确定圆心位置而进行的顺时针旋转,需要的朋友可以参考下
Android开发实现图片平移、缩放、倒影及旋转功能的方法
01-04
本文实例讲述了Android开发实现图片平移、缩放、倒影及旋转功能的方法。分享给大家供大家参考，具体如下： 解析： 1）根据原来的图片创建新的图片 Bitmap modBm = Bitmap.createBitmap(bm.getWidth()+20, bm....
Vue使用Canvas绘制图片、矩形、线条、文字，下载图片
10-17
主要介绍了Vue使用Canvas绘制图片、矩形、线条、文字，下载图片的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
H5 canvas图片加相框 图片缩放扩大移动
08-20
HTML5增加相框 , 支持FF, IE等浏览器等. 手机滑动/鼠标滚轮控制缩放功能等HTML5增加相框 , 支持FF, IE等浏览器等. 手机滑动/鼠标滚轮控制缩放功能等HTML5增加相框 , 支持FF, IE等... 手机滑动/鼠标滚轮控制缩放功能等
html2D转换案例,html5+css3实现2D-3D动画效果实例
weixin_36044301的博客
05-30 177
html5+css3实现2D-3D动画效果实例主要实现的功能就是一些2D、3D的动画效果，如平移、缩放、旋转等等。文章目录html5+css3实现2D-3D动画效果实例2D变换3D变换2D中应用实现案例3D中应用实现案例css3动画2D变换是在一个平面对元素进行的操作。可以对元素进行水平或者垂直位移、旋转或者拉伸.12*2d对下面面坐标系简单分析如下：(1).默认状态下，x轴是水平的，向右为正。(...
图片浏览（支持放大缩小、实际大小）
11-12
插件描述：实现图片在div中从中心向外放大缩小，可拖动。 参考实例：http://www.jq22.com/jquery-info4580
canvas实现图片旋转缩放
水荷的博客
07-10 4938
canvas实现图片旋转，用到的基本函数： rotate（）实现旋转； scale（X,Y）实现缩放，X代表水平缩放，Y代表垂直缩放； translate（X,Y）为画布的变换矩阵添加水平的和垂直的偏移；基本思路：用rotate（）方法实现图片旋转，用scale（）实现缩放。rotate（）旋转的时候是以左上角为顶点进行旋转，如果想以图片中心为定点旋转，用translate（）将点定位到图片中
canvas实现图片缩放、移动、旋转
diga6688的博客
04-10 787
canvas实现图片缩放、移动、旋转功能基于两个方面：1. canvas图像变换； 2. drawImage()方法。其他就是一些坐标点的计算了。 html部分: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style>...
前端使用canvas将颠倒的图片进行旋转矫正
Erin_jwx的博客
05-18 2806
效果展示图 图1为原图 图2为180°旋转后的结果 图3为镜像翻转的结果 相关原理 主要是用了canvas里变换相关的API，处理后再使用canvas绘制图片 1.旋转图片 默认情况下，绘制图片的效果如图1 （图中预期为错别字，是区域…） 移动原点到canvas的中心点：成像效果如图2 绕原点顺时针旋转Pi个弧度,成像效果如图3 最后调整从(-img_width / 2, -img_height / 2)这个下标开始画图即可 2.图片镜像 通过scale调整方向即可。 scale(scaleX, s
利用canvas画布和rotate()方法让画的图形旋转起来
weixin_44286392的博客
07-27 2832
上一篇讲了利用canvas画布画太极图，这一篇说的是让太极图旋转起来。 **思路：**利用HTML DOM 的setInterval()方法，它会按照指定的周期来调用函数或计算表达式。再利用画布的rotate()方法，该方法的参数angle表示旋转的量，用弧度表示。正值表示顺时针方向旋转，负值表示逆时针方向旋转。如果没有angle+=0.02，太极图只旋转一次。 源码： <!DOCTYPE html> <html lang="en"> <head> <meta c
canvas图像绘制（图像放大、缩小、拖动和截图）
热门推荐
qq_39404437的博客
08-06 1万+
1、canvas略解林大大又来更新啦~这次主要做的是关于canvas图像绘制的部分，要实现的功能主要是绘制、对canvas的放大以及那我们先来大概了解下canvas：1、canvas略解宽高是必须加上的，当然你也可以选择动态宽高，可以设置宽高百分比喔，canvas用于在页面上绘制图像（可以是自己的图片，也可以绘制自定义矢量图形：矩形等），其实我们不用担心大量的重绘canvas，现在浏览器完全扛得住这压力，非常流畅丝滑。
python canvas画移动物体_canvas中绘制的图像怎么让它移动？
weixin_35781147的博客
12-23 775
一定要用canvas吗？如果一定要用canvas，可以和大多交互性的原始画布一样，使用一个渲染循环(rendering loop)，例如使用requestAnimationFrame，里面根据条件对每个显示对象(display object)进行不断的渲染。每个显示对象都因该有坐标信息，是否显示标识位等，用来在渲染循环里做渲染用。像你这里，可以定义连个显示对象，一个是background，一个是p...
canvas实现图片的旋转以及平移
05-31
要在canvas中实现图片的旋转和平移，可以使用canvas的变换(transform)功能。 平移： 使用canvas的translate()方法，将画布的原点移动到指定的位置，再绘制图像。例如，将画布向右平移50像素，向下平移100像素： `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值