码迷,mamicode.com
首页 > 其他好文 > 详细

canvas 简介

时间:2017-11-22 00:01:06      阅读:214      评论:0      收藏:0      [点我收藏+]

标签:缩放   结束   坐标系   参数   cto   直线   join   特效   编码   

Canvas的概述

定义

  • <canvas>是H5新增的标签
  • canvas提供给了 javascript 绘图接口
  • canvas绘图建立在坐标系上

应用领域

  • 炫酷特效、banner
  • 可视化数据(图表)
  • 游戏
  • 大型应用(地图)
  • 在线系统 (在线PS )

canvas标签

  • 属性 width
  • 属性 height
  • 方法 getContext() 可选的参数 "2d" / "webgl" 返回上下文环境

绘图环境

  • 该对象提供API,让JavaScript来绘制图形

绘图基础

路径的开启和闭合

  • beginPath() 开启路径
  • closePath() 关闭路径 (把路径闭合)

设置起点

  • moveTo(x, y)

画线

  • lineTo(x , y) 绘制直线

描边

  • lineWidth 属性 设置描边线的粗细
  • strokeStyle 属性 设置描边颜色
  • stroke() 绘制

填充

  • fillStyle 属性 填充颜色
  • fill() 执行填充

快速矩形

  • rect(x, y, width, height) 绘制矩形路径
  • strokeRect(x, y, width, height) 描边矩形
  • fillStroke(x, y, width, height) 填充矩形
  • clearRect(x, y, width. height) 清除矩形 (可以用来清除屏幕)

圆弧

  • arc(x, y, radius, start, end, true/false) 圆弧路径
  • start 表示开始的弧度(位置) 0弧度是三点钟方向
  • end 表示结束的弧度(位置)
  • 默认false 表示顺时针

绘制文字

  • font 属性 设置文字的风格、大小、字体 值 同css的font属性
  • textAlign 属性 文字水平对齐方式 (start/left/center/right/end)
  • textBaseline 属性 文字的垂直对齐方式 (top/middel/bottom/alphabetic)
  • strokeText(text, x, y) 描边字
  • fillText(text, x, y) 填充字
  • measureText(text) 返回对象 文字的宽度 取决于字体大小

绘制图片

  • drawImage(img, x, y) 简单绘制图片
  • drawImage(im, x, y, w, h) 绘制图片并指定在画布上的大小
  • drawImage(im, sx, sy, sw, sh, x, y, w, h) 裁剪图片并把裁剪部分绘制到画布
  • 其中 img是图片的dom对象, 配合onload事件

设置阴影

  • shadowColor 阴影颜色
  • shadowBlur 阴影模糊值
  • shadowOffsetX 阴影x偏移量
  • shadowOffsetY 阴影y偏移量

渐变

  • createLinearGradient(x, y, x1, y1) 创建线性渐变
  • createRadialGradient(cx1, cy1, r1, cx2, cy2, r2);

线条样式

  • lineCap 属性 线条两端样式 butt/round/square
  • lineJoin 属性 线条相交样式 miter/bevel/square

Cavnas 高级

变换--位移

  • translate(x, y)

变换-缩放

  • scale(xS, yS)

变换-旋转

  • rotate(弧度)

环境的保存和释放

  • save()
  • restore()

    设置透明度

  • globalAlpha 属性 设置绘图环境的不透明度 值 0~1之间

限制绘图区域

  • clip() 配合路径。 对绘图环境进行的限制

输入base64编码

  • canvasEle.toDataURL()

画布渲染画布

  • 使用 drawImage() 把canvas元素当做img元素

贝塞尔曲线

  • bezierCurveTo()

绘制圆角

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

Cavnas 第三方类库

常见的第三方类库

  • konva.js
  • chart.js 图表插件
  • eccharts 图表插件(百度)
  • tree.js (3d webgl 库)

第三方类库 Konva

Konva的结构

  • 舞台 (stage)--> 层(layer) --> 图形
  • Statge --> Layer ---> 分组 (--->分组---->) ---> 图形

Konva 绘制图形

  • Konva.Rect
  • Konva.Circle
  • Konva.Wedge
  • Konva.Line
  • Konva.Star
  • Konva.Image
  • ......

canvas 简介

标签:缩放   结束   坐标系   参数   cto   直线   join   特效   编码   

原文地址:http://www.cnblogs.com/kyl-6/p/7875690.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!