canvas - 变换

  变换方法 *5

translate(x,y)  重新映射画布上的(0,0)

rotate(deg)    deg  - degree * Math.PI / 180

scale(scaleWidth,scaleHeight)

transform(a,b,c,d,e,f) // 水平缩放绘图  水平倾斜绘图 垂直倾斜绘图 垂直缩放绘图 水平移动绘图 垂直移动绘图

setTransform

ctx.strokeStyle = "#f89";
ctx.fillStyle = "#f89";
ctx.shadowColor = "#e10";
ctx.shadowOffsetX = ctx.shadowOffsetY =  6;
ctx.lineWidth = 5;

ctx.translate(200,200)
for (var i =12;i--;){
    ctx.rotate(30*Math.PI/180);
    ctx.moveTo(0,0);
    ctx.lineTo(100,100);
    ctx.stroke();
}

ctx.rect(50,300,100,100);
ctx.stroke()

undefined
ctx.transform(1,0.5,-0.5,1,300,10);
ctx.fillRect(0,0,250,100);

时间: 2024-11-09 04:48:24

canvas - 变换的相关文章

android Graphics(四):canvas变换与操作

前言:前几篇讲解了有关canvas绘图的一些操作,今天更深入一些,讲讲对画布的操作,这篇文章不像前几篇那么容易理解,如果以前没有接触过画布的童鞋可能比较难以理解,为什么会这样.我尽量多画图,让大家更清晰明白. 前几天偶然看到一篇文章,写的朴实无华,充满正能量,我非常喜欢里面的一句话,很像我现在的状态,分享给大家. 人生最纠结的事情不是你甘于平淡,而是你明明不希望平凡却不知道未来应该怎么办. ----摘自<三十岁那年,我的梦想是年薪十万> 相关文章: 1.<android Graphics

【转】android Graphics(四):canvas变换与操作

android Graphics(四):canvas变换与操作 分类: 5.andriod开发2014-09-05 15:05 5877人阅读 评论(18) 收藏 举报 目录(?)[+] 前言:前几篇讲解了有关canvas绘图的一些操作,今天更深入一些,讲讲对画布的操作,这篇文章不像前几篇那么容易理解,如果以前没有接触过画布的童鞋可能比较难以理解,为什么会这样.我尽量多画图,让大家更清晰明白. 前几天偶然看到一篇文章,写的朴实无华,充满正能量,我非常喜欢里面的一句话,很像我现在的状态,分享给大家

canvas变换(移动,缩放等)

代码: 1 /** 2 * Created by Administrator on 2016/1/30. 3 */ 4 function draw (id){ 5 var canvas = document.getElementById(id); 6 var context = canvas.getContext('2d'); 7 /* context.translate(200,120);//偏移量 8 context.rotate(Math.PI/6);//旋转 9 context.scal

转载爱哥自定义View系列--Canvas详解

上面所罗列出来的各种drawXXX方法就是Canvas中定义好的能画什么的方法(drawPaint除外),除了各种基本型比如矩形圆形椭圆直曲线外Canvas也能直接让我们绘制各种图片以及颜色等等,但是Canvas真正屌的我觉得不是它能画些什么,而是对画布的各种活用,上一节最后的一个例子大家已经粗略见识了变换Canvas配合save和restore方法给我们绘制图形带来的极大便利,事实上Canvas的活用远不止此,在讲Canvas之前,我想先给大家说说Canvas中非常屌毛而且很有个性的一个方法:

自定义控件三部曲之绘图篇(十四)——Canvas与图层(二)

前言: 有些话说得坦白就会变成感慨有些事总想不开难免有太多无奈这一路走来梦想从未更改相信真心的付出就能够活得精彩把头抬起来拍拍身上的尘埃坚守心底的真爱勇敢相信未来 --巫启贤<相信未来> 系列文章: Android自定义控件三部曲文章索引:http://blog.csdn.net/harvic880925/article/details/50995268 一.FLAG的具体意义 1.FLAG概述 有关save系列函数,在canvas中总共有如下几个: public int save() pub

Canvas简述

HTML Canvas API有两方面优势可以弥补:首先,不需要将所绘制图像中的每个图元当做对象存储,因此执行性能非常好:其次,在其他编程语言现有的优秀二维绘图API的基础上实现Canvas API相对来说比较简单. 在网页上使用canvas元素时,它会创建一块矩形区域.默认情况下该矩形区域宽为300像素,高为150像素,但也可以自定义具体的大小或者设置canvas元素的其他特性. 1 <body> 2 <div> 3 <header> 4 <h1>inde

Android基础入门教程——8.3.18 Canvas API详解(Part 3)Matrix和drawBitmapMash

Android基础入门教程--8.3.18 Canvas API详解(Part 3)Matrix和drawBitmapMash 标签(空格分隔): Android基础入门教程 本节引言: 在Canvas的API文档中,我们看到这样一个方法:drawBitmap(Bitmap bitmap, Matrix matrix, Paint paint) 这个Matrix可是有大文章的,前面我们在学Paint的API中的ColorFilter中曾讲过ColorMatrix 颜色矩阵,一个4 * 5 的矩阵

HTML5 程序设计 - 使用HTML5 Canvas API

请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方便查看. 学习笔记,纯手工码字,有错别字什么的请指出,觉得好的请点个赞小小的支持下.谢谢亲们. 本篇,我们将探索如何使用HTML5和Canvas API.Canvas API很酷,可以通过它来动态生成和展示图形.图表.图像以及动画. 本篇将使用渲染API(Rendering API)的基本功能来创建

canvas知识01

本文转自:http://www.cnblogs.com/jsdarkhorse/archive/2012/06/29/2568451.html 更多参考:http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html#-1 1.HTML Canvas API有两方面优势可以弥补 首先,不需要将所绘制图像中的每个图元当做对象存储,因此执行性能非常好:其次,在其他编程语言现有的优秀二维绘图API的基础上实现Canvas API相对来说比较简