Canvas之translate - chunfengxixi - ITeye博客

`

chunfengxixi

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

最近访客更多访客>>

hanjun0612

rwgfweerbhwq

xubbsun

u013510361

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

iijjll： IE7以及IE7以前的IE浏览器，最多只支持2083个字符。
主流浏览器对GET请求发送的数据量限制的测试
iceskysl：抛出异常的爱写道刚刚在技能云http://www.itec ...
奇怪的session混乱问题
fyting： ...牛,以前我们项目里也有这种代码,上线后才发现,图省事直接 ...
奇怪的session混乱问题
chunfengxixi： public class BaseMappingDispatc ...
奇怪的session混乱问题
dennis_zane：服务器不可能出问题的，肯定是代码问题，将session作为实例 ...
奇怪的session混乱问题

请您先登录，才能继续操作

Canvas之translate

博客分类：

web前端
html5

阅读更多

<html>

<canvas id='a' style='border:1px solid;' width = '200px' height= '200px'>

</canvas>

<script>

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
浏览 2221
评论(0)
分类:Web前端
查看更多

评论

发表评论

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

相关推荐

Canvas之translate、scale、rotate、skew方法讲解！: 在Canvas上进行绘图时，我们经常会用到几个重要的变换方法：translate、scale、rotate和skew。这些方法用于改变图形的位置、大小、角度以及倾斜度，从而实现丰富的视觉效果。接下来，我们将深入探讨这几个方法的使用...

安卓绘图 canvas 绘图平移缩放: 4. 使用canvas.translate()和canvas.scale()来设置平移和缩放操作。 5. 执行绘图操作，例如绘制矩形、圆形等。 6. 调用canvas.restore()恢复之前保存的绘图状态，确保后续的绘制不受当前变换的影响。 7. 最后，调用...

android利用Paint在Canvas上实现竖排写字: - 可以通过设置Paint的`paint.setTextAlign(Paint.Align.RIGHT)`使文本右对齐，再配合`canvas.translate()`方法改变画布的坐标原点，使得每次绘制文本时都会向左移动一定的距离，从而达到竖排的效果。 4. **步骤...

使用canvas画线，位移，旋转，绘制五角星。: 首先，Canvas提供了各种绘图方法，如`drawLine()`用于画线，`translate()`用于平移，`rotate()`用于旋转。理解这些方法的工作原理是关键。`drawLine()`接受四个参数：起始点x和y，结束点x和y，然后用指定的画笔...

canvas 原位置旋转图片: 本文将详细讲解如何在Canvas上实现原位置旋转图片，并通过`translate`和`rotate`两个关键方法来理解这一过程。首先，我们需要创建一个Canvas元素并在HTML中插入它： ```html <!DOCTYPE html> <title>Canvas ...

Android canvas.save()和canvas.restore()的理解: 3. 应用一系列变换，比如`translate()`、`rotate()`或`scale()`。 4. 绘制一个图形，这会受到之前变换的影响。 5. 调用`canvas.restore()`恢复到初始状态。 6. 重复步骤3-5，但每次应用不同的变换，绘制出不同的图形...

canvas图片旋转自适应容器宽度实践: ctx.translate(scale * (canvas.width - rotatedWidth) / 2, scale * (canvas.height - rotatedHeight) / 2); } ``` 每次旋转后调用`resizeCanvasToFitImage()`函数，就可以确保图片始终适应容器宽度。通过这样...

html2canvas 网页对图片加水印: watermark.style.transform = 'translate(-50%, -50%)'; document.body.appendChild(watermark); ``` 4. **调用HTML2Canvas**：使用HTML2Canvas API将包含水印的整个页面或特定元素渲染到Canvas上。然后，你可以...

node + canvas 例子: ctx.translate(canvas.width / 2, canvas.height / 2); ctx.rotate(Math.PI / 4); ctx.translate(-canvas.width / 2, -canvas.height / 2); // 保存旋转后的图片 const out = fs.createWriteStream('rotated_...

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

H5 canvas制造3D旋转爱心表白: 2. **获取Canvas上下文**：在JavaScript中，我们需要获取到canvas元素的2D渲染上下文，这通常是通过`getContext('2d')`方法完成的。 ```javascript const canvas = document.getElementById('heartCanvas'); const ...

HTML5 Canvas画印章: 2. **获取Canvas上下文**：使用JavaScript的`document.getElementById`方法获取到`canvas`元素，并通过`getContext`方法获取2D渲染上下文，这是进行绘图操作的基础。 ```javascript var canvas = document....

基于canvas 2D实现微信小程序自定义组件-环形进度条: transform: translate(-50%, -50%); border-radius: 50%; } ``` 这样，我们就实现了一个基础的环形进度条自定义组件。用户可以根据需求调整组件的大小、颜色等属性，也可以扩展更多的属性，例如进度条内径、渐变...

超多经典canvas实例: 除了基本绘图，Canvas还支持复杂的图形操作，比如路径操作（`beginPath()`, `moveTo()`, `lineTo()`, `closePath()`等）、图像处理（如`drawImage()`用于绘制图片，`scale()`, `rotate()`, `translate()`用于变换）...

HTML5 Canvas核心技术代码: - `translate(x, y)`：平移坐标系。 - `rotate(angle)`：旋转坐标系。 - `scale(x, y)`：缩放坐标系。 - `transform(a, b, c, d, e, f)`和`setTransform(a, b, c, d, e, f)`：应用2D变换矩阵。 6. **动画与帧率...

重写viewgroup 使用canvas实现动画: canvas.translate(centerX, centerY); canvas.rotate(rotateAngle, 0, 0); // rotateAngle为当前旋转角度 // 遍历并绘制所有子视图 for (int i = 0; i (); i++) { View child = getChildAt(i); child.draw...

解决htmlcanvas手机无法截图或者截图不全的问题: 1. **CSS3 Transformations**：当HTML元素使用了CSS3的transform属性（如translate、rotate、scale等）时，html2canvas可能无法正确地捕获变换后的元素。 2. **Z-Index和层叠上下文**：如果元素在页面上的堆叠顺序...

html5 canvas绘制3D地球旋转动画特效: ctx.translate(canvas.width / 2, canvas.height / 2); ctx.rotate(angle * Math.PI / 180); // 将角度转换为弧度 drawEarth(); // 你的地球绘制函数 ctx.restore(); // 请求下一次绘制 ...

HTML5 Canvas酷炫可视化音频动画特效: 在描述中提到的“3D视觉动画效果”，这可能涉及到Canvas的变换（translate、rotate、scale）以及渲染3D图形的WebGL API。WebGL是一个JavaScript API，它允许在浏览器中进行硬件加速的3D图形渲染。通过WebGL，开发者...

HTML5 Canvas全屏背景动画特效: 1. 图形变换：Canvas提供了旋转（`rotate()`）、缩放（`scale()`）、平移（`translate()`）等方法，可以结合时间戳实现复杂的动画效果。 2. 颜色过渡：使用`createLinearGradient()`或`createRadialGradient()`创建...

Global site tag (gtag.js) - Google Analytics