美文网首页
H5 Canvas 基本使用

H5 Canvas 基本使用

作者: 风之化身呀 | 来源:发表于2019-01-13 18:45 被阅读17次

Canvas 基本使用

  • Canvas 是为了解决 Web 页面中只能显示静态图片这个问题而提出的,一个可以使用 JavaScript 等脚本语言向其中绘制图像的 HTML 标签
  • Canvas,若没有设置宽高,那么会自动创建一个 300 * 150 的画布(单位默认为 px)
  • 设置canvas宽高的两种方式:HTML标签上设置或者JS设置,注意不能用CSS设置(会被拉伸)
// 方式1:OK
<canvas id="canvas" width="400" height="400">
// 方式2:OK
var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var cx = canvas.width = 400;
    var cy = canvas.height = 400;...
// 方式3:wrong !!!
#canvas {
    background: #000;
    width: 400px;
    height: 400px;
}:
  • 获取 Canvas 对象
// contextType一般取‘2d’,第二个参数几乎不用
canvas.getContext(contextType, contextAttributes);
  • Canvas API
    几何图形类
fill()  填充路径
stroke()    描边
arc()   创建圆弧
rect()  创建矩形
fillRect()  绘制矩形路径区域
strokeRect()    绘制矩形路径描边
clearRect() 在给定的矩形内清除指定的像素
arcTo() 创建两切线之间的弧/曲线
beginPath() 起始一条路径,或重置当前路径
moveTo()    把路径移动到画布中的指定点,不创建线条
lineTo()    添加一个新点,然后在画布中创建从该点到最后指定点的线条
closePath() 创建从当前点回到起始点的路径
clip()  从原始画布剪切任意形状和尺寸的区域...

渐变类:

createLinearGradient()  创建线性渐变(用在画布内容上)
createRadialGradient()  创建放射状/环形的渐变(用在画布内容上)
addColorStop()  规定渐变对象中的颜色和停止位置\

图形变换类:

scale() 缩放当前绘图至更大或更小
rotate()    旋转当前绘图
translate() 重新映射画布上的 (0,0) 位置
transform() 替换绘图的当前转换矩阵

图像绘制类:

getImageData(x,y,width,height) // 返回 ImageData 对象,该对象拷贝了画布指定矩形的像素数据
drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

Canvas 进阶

  • 制作炫酷网页背景特效的特点
    1、渐变背景(body 设置线性渐变,同级div颜色动画,canvas 透明即可)
    2、炫酷 (随机的运动,比如随机粒子,每次擦除画布重绘时,改变粒子的位置、大小、透明度等)。运动的效果本质是画布的擦除和重绘。
    3、特效(与用户交互,如鼠标跟随和视觉差,监听鼠标移动事件)

Canvas 特效实例分析

...

参考

相关文章

  • h5新增标签canvas0818

    h5新增标签canvas 1.基本概念 01-Canvas开...

  • H5 Canvas 基本使用

    Canvas 基本使用 Canvas 是为了解决 Web 页面中只能显示静态图片这个问题而提出的,一个可以使用 J...

  • 小程序canvas实现签名

    这里使用获取canvas节点实现的,最新的api,小程序将canvas中的api变成了h5中使用canvas的那中...

  • canvas(二)绘制图形

    使用canvas 绘制图形 上一篇 canvas基本用法在学习了canvas基本用法 我们开始着手在 canvas...

  • canvas 手势控制

    基本介绍 关于 canvas 的基本使用,可以参考以下两个网站: Android Canvas绘图详解(图文) -...

  • 【Canvas】笔记(一)基础知识

    (一)Canvas 基础 (1) canvas 使用基本流程都是先获取其 canvas 索引,然后获取其绘图环境 ...

  • canvas实用技巧及案例

    canvas实用技巧及案例 canvas作为H5的新增元素,使用方便,作用广泛,因此我们很有必要把它学会,乃至融会...

  • HTML之canvas

    参考文档 MDN w3schook canvas基本使用 canvas坐标系 绘图基本步骤 绘制图形 路径的概念 ...

  • 四周搞定《JavaScript 高级程序设计》 - 读书笔记(D

    第15章 使用 Canvas 绘图 15.1 基本用法 取得绘图上下文: 在使用 canvas 元素之前,首先要检...

  • Canvas的基本使用

    1.基本使用 HTML JavaScript 2.画一条直线 3.画多边形 4.分开画两条直线 ** 4.1假如不...

网友评论

      本文标题:H5 Canvas 基本使用

      本文链接:https://www.haomeiwen.com/subject/ftneyxtx.html