Canvas之translate

chunfengxixi

浏览: 41471 次
性别:
来自: 武汉

最近访客更多访客>>

hanjun0612

rwgfweerbhwq

xubbsun

u013510361

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web前端
html5

<html>

</canvas>

function drawDiagonal(){

var canvas = document.getElementById('a');

var context = canvas.getContext('2d');

context.save();//用于原点的恢复,否则是不能恢复的

context.translate(100,100);//原点移动到正中央

context.beginPath();

context.moveTo(0,0);

context.lineTo(-50,-100);

context.stroke();

context.restore();//原点恢复到起初的原点

context.beginPath();

context.moveTo(0,0);

context.lineTo(50,50);

context.stroke();

}

window.addEventListener('load',drawDiagonal,true);

</script>

</html>

分享到：

DB2导入导出 | winxp创建ODBC连接访问Oracle

2012-02-29 21:44
浏览 2193
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Canvas之translate、scale、rotate、skew方法讲解！: Canvas之translate、scale、rotate、skew方法讲解！

时钟（canvas): 通过canvas的translate和rotate属性，来实现时钟的分针、时针和秒针的旋转移动

Android Canvas drawText文字居中的一些事（图解）: 1.写在前面在实现自定义控件的过程中，常常会有绘制居中文字的需求，于是在网上搜了一些相关的博客，总是看的一脸懵逼，就想着自己分析一下，在此记录下来，希望对大家能够有所帮助。... canvas.translate(get

安卓绘图 canvas 绘图平移缩放: 自己做的安卓绘图Demon笔记，演示 canvas类的 translate、scale 图形平移缩放，附代码，供大家参考

watermark:canvas图片水印，用于身份证等个人信息添加仅用于XXX等字样保护个人信息: watermark最安全，最快速的纯前端图片加水印，...纯前端canvas加水印，开源代码主要用途在各种证件上添加“仅用于办理XXXX，他用无效。”，防止证件被他人盗用！开发npm installnpm startopen http://localhost:8000/

canvas 原位置旋转图片: 如果不经过处理，在原点旋转的图片就看不到了。这里使用translate对原点进行移动，然后再旋转。这样就可以实现在原位置旋转图片了。代码一看就会。完整注释

canvas案例笔记: 平移： ctx.translate(x, y) x表示从当前坐标系向x正方向移动x像素 y表示从当前坐标系向y轴的正方向移动y像素旋转： ctx.rotate(x); x 表示弧度制单位从当前坐标系沿着旋转x弧度如果x值为正顺时针旋转反之逆...

canvas旋转绘图: 博文《 Android画布canvas rotate，translate的理解》http://blog.csdn.net/peak1chen/article/details/50776507demo下载链接

2.13 translate、rotate和scale方法的应用｜星空和图形变换｜Canvas图形、动画、游戏开发从入门到精通全系列课程: 2.13_translate、rotate和scale方法的应用｜星空和图形变换｜Canvas图形、动画、游戏开发从入门到精通全

AndroidAnimation-Android自定义View之星球运动.zip: canvas.translate(-maxRand / 2F , -maxRand / 2F) val Random = Random(perIndexInAll.toInt().toLong()) //绘制背景的星星 for (index in 0..4){ drawStart(canvas , Random....

【JavaScript源代码】html+css+js实现canvas跟随鼠标的小圆特效源码.docx: 定义标签：　北极光之夜</h1>　<canvas id="draw" style=" position: fixed; display: block;"> 当前浏览器不支持Canvas，请更换浏览器后再试　</canvas>　2. 文字的基本样式：　h1{　position: absolute;　top: 50...

Canvas碎纸屑闪烁动画特效.zip: this.ctx.translate(this.w / 2, this.h / 2); this.ctx.rotate(this.rot); ref = this.objects; for (j = 0, len = ref.length; j ; j ) { obj = ref[j]; obj.draw(); } this.ctx.restore()...

canvas之万花筒效果的简单实现(推荐): canvas里封装好的变换函数：scale()、rotate()、translate()、transform()、setTransform()；而它们只要传数字进去即可，单位不用传，还有这里角度单位是弧度，这些是与css里的区别，transform()、setTransform();在...

canvas-cave-path:沿路径画洞壁: 帆布洞路径 ... 安装 npm install canvas-cave-path 例子 var cave = require ( 'canvas-... translate ( 200 , 200 ) ctx . lineWidth = 2 ctx . strokeStyle = 'red' cave ( ctx , [ [ 0 , 0 ] , [ 200 , 0 ] ,

Android代码-ScollZoomListView: ScrollZoomListView use Animation and Canvas let ListView scale and translate, add ScaleGestureDetector , GestureDetector expand ListView. Core code @Override protected void dispatchDraw(@NonNull ...

lucky-canvas::military_medal::military_medal::military_medal: 基于 TS + Canvas 封装的【大转盘九宫格】抽奖插件，:rainbow: 一套源码适配多端框架 JS JQ Vue React Taro UniApp 微信小程序等，:artist_palette: 奖品文字图片颜色按钮均可配置，支持同步异步抽奖，:bullseye: 概率前后端可控，:rocket: 自动根据 dpr 调整清晰度适配移: lucky-canvas 抽奖插件一个基于 JavaScript 的 ( 大转盘 / 九宫格 ) 抽奖插件 · 官方文档 & Demo演示中文： English：If anyone can help translate the document, please contact me ldq404@qq.com 适配...

html5之Canvas路径绘图、坐标变换应用实例: 本文写一个html5的时钟应用程序试手主要设置了坐标变换的平移（translate）和旋转变换（ratate），以及html5 Canvas的路径绘图，beginPath，closePath，rect，arc等多的也不说了，直接上代码有需要的朋友可以参考下

Canvas制作旋转的太极的示例: 好久没动canvas了，今下午突然想回顾一下，就写了个旋转的太极，哈哈，蛮好玩的，在这里就将自己写的过程展示出来，旋转使用的css实现的，没有用canvas自己的，希望大佬们不要吐槽。 css body{ background: #ddd; ...

ctx-render-polyline:使用html5 2d canvas渲染线段: ctx-render-polyline 使用html5 2d canvas渲染线段安装npm install ctx-render-polyline 用var center = require ( 'ctx-translate-center' ) ;var poly = require ( './ctx-render-polyline' )var ctx = document ....

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论