文档章节

CANVAS 绘画

见就别贱
 见就别贱
发布于 2017/06/28 22:22
字数 395
阅读 6
收藏 0

基础绘画

路径开始和关闭

  • beginPath()
  • closePath()

起始点

  • moveTo()

划线

  • lintTo()

矩形

  • rect(x,y,w,h) 矩形路径
  • strokeRect(x,y,w,h) 描边矩形
  • fillRect(x, y, w, h) 填充矩形
  • clearRect(x, y, w, h) 清除矩形

  • arc(x,y,r,startAngle, endAngle, true/false)

文字

  • strokeText(text, x, y) 描边文字
  • fillText(text, x, y) 填充文字
  • measureText(text) 求文字的宽度
  • font 属性 12px 字体 bold italic 12px 字体
  • textAlign 属性 水平对齐方式
  • textBaseline 属性 垂直对齐方式

描边

  • stroke() 描边路径
  • strokeStyle 属性 设置描边颜色
  • lineWidth 属性 设置描边宽度

填充

  • fill() 填充路径
  • fillStyle 填充颜色

绘制图片

  • 基本绘图 drawImage(img, x, y)
  • 绘图并设置大小 drawImage(img, x, y, w, h)
  • 裁剪图片 drwaImage(img, sx, sy, sw, sh, x, y, w, h) 先写原图的左边大小,在写画布的坐标大小

高级绘画

阴影

  • shadowColor 属性 阴影颜色
  • shadowBlur 属性 模糊值
  • shadowOffsetX 属性 水平方向的偏移量
  • shadowOffsetY 属性 垂直方向的偏移量

渐变

线性渐变
  • createLinearGradient(x0, y0, x1, y1);
  • graObj.addColorStop(位置, 颜色) 位置是0~1之间的小数
径向渐变
  • createRedialGradient(x0, y0, r0, x1, y1, r1);
  • graObj.addColorStop(位置, 颜色)

填充背景

  • createPattern(img, repeat) 第二个参数是填充方式
    • repeate
    • repeate-x
    • repeate-y
    • no-repeate
  • 填充对象跟渐变对象类似,相当于一种颜色

变换-缩放

  • scale(w, h)

变换-位移

  • translate(w, h)

变化-旋转

  • rotate(angle) 弧度

绘图环境的保存和释放

  • save() 保存当前的绘图环境
  • restore() 释放前面保存的绘图环境

© 著作权归作者所有

上一篇: canvas高级
下一篇: CANVAS 简介
见就别贱
粉丝 1
博文 9
码字总数 3632
作品 0
温州
私信 提问
关于swt 2D图形的一些知识介绍

org.eclipse.swt.graphics包(package),包含了管理图形资源的类。只要实现了org.eclipse.swt.graphics.Drawable接口,就可在上面绘画,包括 org.eclipse.swt.widgets.Control 和 org.ecli...

zhenghuazhi
2010/04/22
915
0
JavaEE——HTML5绘画

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 绘画是HTML5的新功能,以前是没有的,有flash的...

凯哥学堂
2017/10/30
0
0
Canvas 都坐下,基本操作

前言 从最开始小白使用canvas采坑无数,让自己也积累了些还不错的想法,这期内容也是给自己做了些canvas api整理,以及需要注意的地方 参考网站 MDN 文章链接 微信H5实现网页长按保存图片及识...

MrZss
02/26
0
0
轻量级的Canvas类库--ZRender

zrender(Zlevel Render) 是一个轻量级的Canvas类库,MVC封装,数据驱动,提供类Dom事件模型,让canvas绘图大不同! MVC核心封装实现图形仓库、视图渲染和交互控制: Stroage(M) : shape数据...

xu81.com
2013/07/10
29.6K
3
View 和 SurfaceView的区别

这里说的是在绘图中两者的区别: 1View在绘图中,重写onDraw(Canvas canvas)方法,通过invaldate()和pastInvalidate()两个方法进行重新绘制画布; invalidate()不能再自己创建的线程中循环调用...

宇宙执政
2014/07/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

android6.0源码分析之Camera API2.0下的Preview(预览)流程分析

本文将基于android6.0的源码,对Camera API2.0下Camera的preview的流程进行分析。在文章android6.0源码分析之Camera API2.0下的初始化流程分析中,已经对Camera2内置应用的Open即初始化流程进...

天王盖地虎626
32分钟前
2
0
java 序列化和反序列化

1. 概述 序列恢复为Java对象的过程。 对象的序列化主要有两 首先我们介绍下序列化和反序列化的概念: 序列化:把Java对象转换为字节序列的过程。 反序列化:把字节序列恢复为Java对象的过程。...

edison_kwok
44分钟前
1
0
分布式数据一致性

狼王黄师傅
今天
2
0
经验

相信每位开发者在自己开发的过程中,都会反思一些问题,比如怎样提高编程能力、如何保持心态不砍产品经理、996 之后怎样恢复精力……最近开发者 Tomasz Łakomy 将他 7 年的开发生涯中学习到...

WinkJie
今天
4
0
从源码的角度来看SpringMVC

SpringMVC核心流程图 简单总结 首先请求进入DispatcherServlet 由DispatcherServlet 从HandlerMappings中提取对应的Handler 此时只是获取到了对应的Handle,然后得去寻找对应的适配器,即:H...

骚年锦时
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部