关闭

canvas笔记

标签: canvas
298人阅读 评论(0) 收藏 举报
分类:

canvas笔记

TOC

重要公式

  1. 1弧度 = (∏ / 180)度
  2. 1度 = (180 / ∏)弧度 
  3. =X×11000×Y

坐标系统

浏览器坐标转换成canvas坐标

function windowToCanvas(x, y) {
   var bbox = canvas.getBoundingClientRect();
   return { x: (x - bbox.left) * (canvas.width  / bbox.width),
            y: (y - bbox.top)  * (canvas.height / bbox.height) };
}

canvas坐标变换

用于坐标变量的通用等式

    x' = ax + cy + e;
    y' = bx + dy + f;

    x' = cos(angle) * x - sin(angle) * y + dx;
    y' = sin(angle) * x + cos(angle) * y + dy;

    a = cos(angle);
    b = sin(angle);
    c = sin(angle);
    d = cos(angle);
    e = dx;
    f = dy;

方案一:用transform方法变换
对应的canvas的transform方法参数:
- 平移:与 e, f 重点内容 有关
- 缩放 : 与 a, d 有关
- 旋转 : 与 a, b, c, d有关

context.transform(a, b, c, d, e, f);

方案二:直接变换坐标

// 高级坐标旋转
// 已知旋转角度(rotation), 当前坐标(x, y), 求旋转后的坐标(x', y')
x' = (x - centerX) * cos(rotation) - (y - centerY) * sin(rotation)
y' = (y - centerY) * cos(rotation) + (x - centerX) * sin(rotation)

案例

第一个transform方法,先对坐标系原点x, y方向上平移100像素, 再在平移后的坐标系原点处放大2倍。
第二个transform方法, 在放大2倍坐标系的基础上将坐标系延x, y方向各平移 -50, -25像素。浏览

    context.save();
    context.fillStyle = fill;
    context.transform(2, 0, 0, 2, 100, 100);
    context.transform(1, 0, 0, 1, -50, -25);
    context.fillRect(0,0,100,50);
    context.restore();
1
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

Canvas学习笔记(一)

本文旨在记录自己学习Canvas中遇到的一些觉得有必要记下来的知识点。一.getContext()方法MDN上的定义: canvas.getContext(contextType, contextAttributes); contextType参数有以下四种: “2d”,创建一个CanvasRen...
  • qq_34491055
  • qq_34491055
  • 2017-06-10 00:41
  • 132

canvas学习笔记(一) ----canvas入门

canvas是html5最强大的元素之一,在图形,动画和游戏开发中有许多应用。 好了,废话不多说,直接上代码: html> head> meta charset="UTF-8"> title>title&g...
  • LuciferMS
  • LuciferMS
  • 2018-01-14 12:56
  • 15

关于Canvas的小笔记

前言这几天一直在看关于view的自定义方面的只是,在onDraw绘制时会经常用到画布Canvas,接下来对画布的知识做一些小总结。一、剪裁方法clipRect(…)(类似于截屏)此方法主要是在画布上街区一定区域的面积进行操作。Rect讲到截取一定区域的面积就要讲到Rectcanvas.drawRec...
  • java_acm
  • java_acm
  • 2015-11-17 16:53
  • 370

自己刚学html的时候记得笔记,别嫌丑,我就是这么学过来的

盒子的阴影 box-shadow:0px 0px 0px #000000;分别是宽高阴影密度颜色 box-sizing:border-box;padding包括里面             content-box;padding不包括...
  • qq_30100043
  • qq_30100043
  • 2016-11-25 11:11
  • 605

CANVAS移动、缩放、旋转画入的图片

自己做的一个CANVAS移动、缩放、旋转画入的图片demo: CANVAS touch测试 *{ margin:0px; padding:0px; -webkit-tap-highlight-color:rgba(0,0,0,0); box-sizing:border-b...
  • qq_16494241
  • qq_16494241
  • 2016-08-16 14:49
  • 7149

HTML5 Canvas中实现绘制一个像素宽的细线

演示HTML5 Canvas中如何正确的画出一个像素宽的直线。
  • jia20003
  • jia20003
  • 2013-07-25 23:10
  • 16368

【js学习笔记-114】----<canvas>矩形、颜色、透明度、渐变及图案

矩形、颜色、透明度、渐变及图案(感觉没怎么懂!!先放这吧,回产头再研究) 矩形 CanvasRenderingContext2D对象定义了4个用于绘制矩形的方法 都接受两个参数,其中一个指定矩形的一个顶点,另一个参数指定矩形的宽高 n  fillRect() 使用fillStyle来填充指...
  • pigpigpig4587
  • pigpigpig4587
  • 2014-04-02 17:43
  • 11815

使用canvas画图,图形模糊怎么办

在说解决办法之前,例行惯例,简要的说明一下Html5中的Canvas。Canvas是Html5制图中常用的元素,但其本身并没有绘制能力,它仅仅是图形的容器,要制图还必须依靠脚本。按照Canvas中提供的方法,我们绘制出各种我们想要的图形,本来说这样就已经很棒了,但是有一个致命因素让人很心塞。对美观比...
  • LeyYang
  • LeyYang
  • 2016-08-18 22:15
  • 7074

Canvas抗锯齿方法两种

转:抗锯齿方法两种(其一:paint.setAntiAlias(ture);paint.setBitmapFilter(true)) 在Android中,目前,我知道有两种出现锯齿的情况。  ①当我们用Canvas绘制位图的时候,...
  • win816723459
  • win816723459
  • 2015-03-26 09:54
  • 4993

canvas lineWidth为1时线条粗细和颜色

今天在使用html5的canvas时碰到了一个问题
  • hansuiqingsong
  • hansuiqingsong
  • 2014-10-13 21:45
  • 3340
    个人资料
    • 访问:43301次
    • 积分:982
    • 等级:
    • 排名:千里之外
    • 原创:52篇
    • 转载:0篇
    • 译文:0篇
    • 评论:3条