canvas旋轉,平移,縮放一二例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding:0; margin:0; } canvas{ display: inline-block; } </style> </head> <body> <canvas id="myCanvas1" width='200' height='200' style="border:1px solid #ccc"></canvas> <canvas id="myCanvas2" width='200' height='200' style="border:1px solid #ccc"></canvas> <canvas id="myCanvas3" width='200' height='200' style="border:1px solid #ccc"></canvas> <canvas id="myCanvas4" width='200' height='200' style="border:1px solid #ccc"></canvas> <script> //canvas旋轉，縮放，平移操作都是對整個畫布的操作，如果有多次的話，本次操作是在上一場的操作的基礎上操作的 //canvas平移是對中心點的操作 var c=document.getElementById('myCanvas1'); var ctx=c.getContext('2d'); ctx.translate(100,0); //中心點由原來的(0,0)變為(100,0),畫布大小，位置不變但是實際上是畫布向右平移了100 ctx.fillStyle="red"; ctx.font="20px 微軟雅黑"; ctx.fillText("no.1",0,20); ctx.translate(-100,0); //畫布向左平移100,回到原始位置 ctx.beginPath(); ctx.font="20px 微軟雅黑"; ctx.fillText("no.2",0,20); ctx.closePath(); //canvas縮放 var c2=document.getElementById('myCanvas2'); var ctx2=c2.getContext('2d'); ctx2.fillStyle="red"; ctx2.font="20px 微軟雅黑"; ctx2.fillText("no.1原始",80,100); ctx2.scale(0.5,0.5); //實際上是畫布縮小了一倍 ctx2.fillStyle="red"; ctx2.font="20px 微軟雅黑"; ctx2.fillText("no.1縮放",80,100); ctx2.scale(0.5,0.5); //這個縮放一倍是在上次縮放的基礎上縮放的 ctx2.fillStyle="red"; ctx2.font="20px 微軟雅黑"; ctx2.fillText("no.2縮放",80,100); ctx2.scale(4,4) //這個縮放是讓畫布回到原來的大小 ctx2.fillStyle="red"; ctx2.font="20px 微軟雅黑"; ctx2.fillText("no.3縮放",80,120); ctx2.scale(1.2,1.2) //在上一場的基礎上放大1.2倍 ctx2.fillStyle="red"; ctx2.font="20px 微軟雅黑"; ctx2.fillText("no.4縮放",80,120); //canvas旋轉 var c3=document.getElementById('myCanvas3'); var ctx3=c3.getContext('2d'); ctx3.fillStyle="red"; ctx3.font="20px 微軟雅黑"; ctx3.fillText("no.1原始",80,120); ctx3.rotate(Math.PI/8) //畫布旋轉了45度 ctx3.fillStyle="red"; ctx3.font="20px 微軟雅黑"; ctx3.fillText("no.1原始",80,120); //canvas平移和旋轉 var c4=document.getElementById('myCanvas4'); var ctx4=c4.getContext('2d'); ctx4.translate(100,100) //畫布中心點在原畫布的中心點上，而不是在左上角了 ctx4.fillStyle="red"; ctx4.font="20px 微軟雅黑"; ctx4.fillText("no.1原始",0,10); ctx4.rotate(Math.PI/4) //畫布旋轉了45度 ctx4.fillStyle="red"; ctx4.font="20px 微軟雅黑"; ctx4.fillText("no.1旋轉",0,10); ctx4.rotate(Math.PI/4) //畫布旋轉了90度 ctx4.fillStyle="red"; ctx4.font="20px 微軟雅黑"; ctx4.fillText("no.2旋轉",0,10); ctx4.rotate(Math.PI/4) //畫布旋轉了135度 ctx4.fillStyle="red"; ctx4.font="20px 微軟雅黑"; ctx4.fillText("no.3旋轉",0,10); ctx4.rotate(Math.PI/4) //畫布旋轉了180度 ctx4.fillStyle="red"; ctx4.font="20px 微軟雅黑"; ctx4.fillText("no.4旋轉",0,10); ctx4.rotate(Math.PI/4) //畫布旋轉了225度 ctx4.fillStyle="red"; ctx4.font="20px 微軟雅黑"; ctx4.fillText("no.5旋轉",0,10); ctx4.rotate(Math.PI/4) //畫布旋轉了270度 ctx4.fillStyle="red"; ctx4.font="20px 微軟雅黑"; ctx4.fillText("no.6旋轉",0,10); ctx4.rotate(Math.PI/4) //畫布旋轉了360度 ctx4.fillStyle="red"; ctx4.font="20px 微軟雅黑"; ctx4.fillText("no.7旋轉",0,10); </script> </body> </html>
相關推薦
canvas旋轉,平移,縮放一二例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style&g
Android單點觸控技術 旋轉 平移 縮放等
原文地址 相信大家使用多點對圖片進行縮放，平移的操作很熟悉了，大部分大圖的瀏覽都具有此功能，有些app還可以對圖片進行旋轉操作，QQ的大圖瀏覽就可以對圖片進行旋轉操作，大家都知道對圖片進行縮放，平移，旋轉等操作可以使用Matrix來實現，Matrix就是一個
OpenGL 矩陣的旋轉-平移-縮放
1. openGL的矩陣 openGL的矩陣是列優先排序的。就是說，矩陣的資料是存貯在一維陣列中，資料上傳到openGL處理的時候，會把一維資料的每一行當做列來處理。比如說，一個4*4的矩陣在陣列中的排列如下： matrix44 = { m0, m1,
屬性動畫(旋轉,平移,縮放,透明集合)
MainActivity package com.example.animator; import android.animation.Animator; import android.animation.AnimatorListenerAdapter;
OpenGL實現滑鼠繞任意軸旋轉/平移/縮放
剛剛學opengl的童鞋肯定有個苦惱的麻煩，只會繪製一個三角形，但是想像那些三維軟體那樣用滑鼠控制視角還是有點困難的，所以我就封裝了一個場景漫遊類：RoamingScenceManager，這個類使用非常方便，跟介面沒有半毛錢關係，可以在Qt，原生OpenGL
canvas和白鷺引擎中平移，旋轉，縮放
都是 canvas 引擎 偏移 坐標 這一 text sla 偏移量 canvas中的 translate() 和白鷺引擎中的 .x 或者 .y 所導致的平移效果並不是移動 目標元素，而是移動目標元素父親所在的坐標系。 例如 bgg.translate（100，100）
canvas 平移 縮放 旋轉
canvas 平移 縮放 旋轉的原理在canvas 畫上一個圖形後將canvas 進行平移，之後在使用相同的位置畫上一個圖形，發現能達到預期的效果因為 canvas 平移 旋轉 縮放 是針對座標軸的剛開始的座標 （0，0）位置 位於左上定點，使用平移後，座標初始位置 分表加減x，y使
Matlab 圖像平移、旋轉、縮放、鏡像
more msh ret 結果 src end 初始 求解 http 今天學習了用Matlab實現對圖像的基本操作。在Matlab中，圖像是按照二維矩陣的形式表示的。所以對圖像的操作就是對矩陣的操作。 對圖像進行縮放、平移、旋轉，都可以轉化為矩陣的運算。 關於變換矩陣的構
OpenGL實現平移縮放旋轉
#define GLEW_STATIC #include <GL\glew.h> #include <GLFW/glfw3.h> #include <iostream> #include "Shader.h" #define STB_IM
屬性動畫---平移、旋轉、縮放、漸變、組合
佈局—5個按鈕，一個ImageView 平移 private void transAnimator() { ObjectAnimator objectAnimator = new ObjectAnimator().ofFloat(image,
SVG 的平移、旋轉和縮放
SVG中的平移、旋轉和縮放在不同的引數條件下，體現出不同的效果: 1、如果直接用x、y指定了圖形的座標（在我的理解該座標實際是圖形相對座標，如果沒有通過transform屬性設定座標平移，該座標是相對畫布起始位置座標，如果設定了座標平移則為相對平移後坐標位置的偏移），所有的
七、Sketchup用ruby進行二次開發--利用Transformation實現Move工具（平移、旋轉和縮放）
在Sketchup中，move工具使用的非常廣泛，，可以移動、拉伸和複製幾何體，也可以用來旋轉元件。舉一個簡單地例子。 我們要做一個建築物的尖頂，如下圖所示，就是使用move工具實現的。 接下來我們就要學習如何使用ruby實現這樣的功能
矩陣運算——平移，旋轉，縮放
平時開發程式，免不了要對影象做各種變換處理。有的時候變換可能比較複雜，比如平移之後又旋轉，旋轉之後又平移，又縮放。 直接用公式計算，不但複雜，而且效率低下。這時可以藉助變換矩陣和矩陣乘法，將多個變換合成一個。 最後只要用一個矩陣對每個點做一次處理就可以得到想要的結果。
線性代數——矩陣解釋平移、旋轉、縮放等
參考部落格： 線性代數：理解齊次座標 https://blog.csdn.net/yinhun2012/article/details/79566148 線性代數：矩陣變換圖形（二維平移縮放旋轉） https://blog.csdn.net/yinhun2012/article/de
vtkPolyData 的空間變換（平移、旋轉、縮放）
vtkPolydata的空間變化主要基於vtkTransform與vtkTransformPolyDataFilter兩個類實現，示例程式碼如下： vtkSmartPointer<vtkTr
檢視的平移、旋轉、縮放等操作（transform）
override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from
OpenGL入門示例8——圖形平移、旋轉、縮放
#include<GL/glut.h> #include <windows.h> static GLfloat spin=0.0; //旋轉量 static GLfloat move=0.0; //平移量 static GLfloat
opengl繪製桌子（平移、旋轉、縮放）
主要儀器裝置 VisualStudio C++2015 Windows10環境 Glut壓縮包 Ex2工程 操作方法和實驗步驟 1.繪製立方體 桌子由立方體組成，我們可以通過繪製六個面來構造一個立方體。六個面的繪製需要八個頂點的引數，而每個頂點均有x,y,z三個引數，如
matlab 影象幾何變換 平移、旋轉、縮放
1、縮放 該函式用於對影象做縮放處理。在matlab的命令視窗中輸入doc imresize或者help imresize即可獲得該函式的幫助資訊 呼叫格式 B = imresize(A, m) 返回的影象B的長寬是影象A的長寬的m倍，即縮放影象。 m大於1，則放大影象;
iOS開發：旋轉、縮放、平移
一、建立一個UIView #import "ViewController.h" @interface ViewController () @property (nonatomic, strong)