文档章节

(canvas----2)

Josie_one
 Josie_one
发布于 2017/06/30 09:23
字数 300
阅读 3
收藏 0

canvas高级

阴影

  • shadowColor 属性
  • shadowBlur 属性
  • shadowOffsetX 属性
  • shadowOffsetY 属性

渐变

线性渐变

  • createLinearGradient(x0, y0, x1, y1);
  • grd.addColorStop(number, color)

径向渐变

  • createRadialGradient(x0,y0,r0, x1, y1, r1)
  • grd,addColorStop(number,color)

背景填充

  • createPattern(img, repeate)

变换 - 缩放

  • sacle(w, h)

变换-位移

  • translate(w, h)

变化-旋转

  • rotate(deg)

环境的保存和释放

  • save()
  • restore()

设置不透明度

  • globalAlpha 属性 设置不透明度 对整体(绘图环境)进行设置 0~1小数

裁剪画布(绘图环境)

  • clip() 沿着路径包围的部分裁切。 对绘图环境进行裁切

画布保存为Base63编码

  • canvas.toDataURL(type, 压缩比) 类型是图片的mime类型

画布渲染画布

  • drawIamge(canvas, 0, 0)
  • 图像在隐藏的canvas 上绘制
  • 绘制完成后 把隐藏canvas 渲染到 显示的canvas上

线条样式

  • lineCap 属性 两端样式 butt/round/square
  • lineJoin 属性 两线相交样式 miter/round/bevel
  • miterLimit 属性 设置尖角的长度

贝塞尔曲线(了解)

使用切线画弧(了解)

  • arcTo(x1, y1, x2, y2, r)

判断是否在路径上

  • isPositionPath(x, y)

canvas库 -- Konva

常见的canvas库

  • Konva
  • echarts
  • 白鹭时代

作业

  • 整理笔记
  • 代码 1 遍
  • 进度条效果

© 著作权归作者所有

Josie_one
粉丝 0
博文 5
码字总数 1145
作品 0
私信 提问
网页动画技巧-Canvas轨迹拖影

以一个旋转载入图标来说明Canvas中轨迹拖影的实现方式。 源码 预览 关键词 半透明填充 Canvas globalAlpha 笔记 方法1:半透明清屏 见预览的左侧Canvas。 在清屏时使用fillRect填充全屏与背景...

轻灵子
01/17
0
0
Html网页DIV截图功能

需求及前提: (1) 将web网页展示的某些图表,导出为图片保存; (2) 图表可能是Canvas的(使用H5绘图组件生成的或者自己Draw的),也可能是div组合出来的; 方案1: 使用html2canvas(某些浏览...

ouhoo
2016/07/19
559
0
AnimCheckBox按钮点击动画效果《IT蓝豹》

AnimCheckBox按钮点击动画效果 AnimCheckBox按钮点击动画效果,点击选中后勾选框选择效果,很不错的动画功能。 项目来源:https://github.com/lguipeng/AnimCheckBox 本项目主要介绍: 本项目...

抉择很难
2015/10/21
52
0
Canvas与View的绘制过程

关于Canvas: To draw something, you need 4 basic components: 1, A Bitmap to hold the pixels, 2, a Canvas to host the draw calls (writing into the bitmap), 3, a drawing primitive......

lightUp
2015/05/20
165
0
[Android] Android Canvas绘图详解(图文)

摘要 Android中使用图形处理引擎,2D部分是android SDK内部自己提供,3D部分是用Open GL ES 1.0。今天我们主要要了解的是2D相关的,如果你想看3D的话那么可以跳过这篇文章。 大部分2D使用的a...

枫兮兮
2014/03/25
155
0

没有更多内容

加载失败,请刷新页面

加载更多

数据库表与表之间的一对一、一对多、多对多关系

表1 foreign key 表2 多对一:表 1 的多条记录对应表 2 的一条记录 利用foreign key的原理我们可以制作两张表的多对多,一对一关系 多对多: 表1的多条记录可以对应表2的一条记录 表2的多条记...

Garphy
42分钟前
6
0
MySQL 表崩溃修复

MySQL日志报错 2019-10-19 13:41:51 19916 [ERROR] /usr/local/mysql/bin/mysqld: Table './initread_hss/user_info' is marked as crashed and should be repaired2019-10-19 13:41:51 1......

雁南飞丶
51分钟前
6
0
Error和Exception

1.Error类和Exception类都是继承Throwable类 2.Error(错误)是系统中的错误,程序员是不能改变的和处理的,是在程序编译时出现的错误,只能通过修改程序才能修正。一般是指与虚拟机相关的问...

大瑞清_liurq
今天
4
0
8086汇编基础 start 程序入口标签的示例

    IDE : Masm for Windows 集成实验环境 2015     OS : Windows 10 x64 typesetting : Markdown    blog : my.oschina.net/zhichengjiu    gitee : gitee.com/zhichengjiu   ......

志成就
今天
4
0
uni app 零基础小白到项目实战2

<template> <scroll-view v-for="(card, index) in list" :key="index"> <view v-for =(item, itemIndex) in card"> {{item.value}}</view> </scroll-view></template> GraceUi va......

达达前端小酒馆
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部