canvas的api总结

简介

Canvas是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作

照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处理和渲染。

Canvas是由HTML代码配合高度和宽度属性而定义出的可绘制区域。JavaScript代码可以访问该区域,类似于其他通用

的二维API,通过一套完整的绘图函数来动态生成图形。

​Mozilla 程序从 Gecko 1.8 (Firefox 1.5)开始支持Canvas, Internet Explorer 从IE9开始支持。Chrome和Opera 9+ 也支持。

canvas的基本使用

1.canvas标签使用

<canvas id="target" width="300px" height="150px">
  不支持canvas标签会显示该内容
</canvas>

2.canvas方法检查

var canvas = document.getElement('target')
if (canvas.getContext) {
  var ctx = canvas.getContent('2d')
} else {
  console.log('该浏览器版本过低,请更换')
}

3.canvas绘制图形

canvas的api

rect( x, y, width, height )   绘制矩形

fillRect( x, y, width, height )  绘制被填充的矩形

strokeRect( x, y, width, height )  绘制矩形(无填充)

clearRect( x, y, width, height ) 清除指定的矩形内的像素



fill()  填充当前绘图(路径)

stroke() 绘制已定义的路径

beginPath()  起始(重置)当前路径

moveTo( x, y )  将笔触移动到指定的坐标(x,y)

lineTo( x, y )  绘制一条从当前位置到指定的坐标(x,y)的直线

clip()  从原始画布剪切任意形状和尺寸的区域



quadraticCurveTo()  创建二次贝塞尔曲线

bezierCurveTo()   创建三次贝塞尔曲线



arc( x, y, radius, startAngle, endAngle, anticlockwise)  绘制圆或圆弧

arcTo( x1, y1, x2, y2, radius)  根据给定点画圆弧,再以直线连接两个点

isPointInPath( x, y )  检测指定的点是否在当前路径中,在则返回true。

fillStyle  设置或返回用于填充绘画的颜色、渐变或模式

strokeStyle  设置或返回用于笔触的颜色、渐变或模式

shadowColor  设置或返回用于阴影的颜色

shadowBlur   设置或返回用于阴影的模糊级别

shadowOffsetX  设置或返回阴影与形状的水平距离

shadowOffsetY  设置或返回阴影与形状的垂直距离


lineCap  设置或返回线条的结束点样式(butt、round、square)

lineJoin  设置或返回当两条线交汇时,边角的类型(bevel、round、miter)

lineWidth  设置或返回当前的线条宽度

miterLimit  设置或返回最大斜接长度


createLinearGradient( x0, y0, x1, y1 )  创建线性渐变

createPattern( image/canvas/video, repeat )  在指定的方向内重复绘制指定的元素

createRadialGradient( x0, y0, r0, x1, y1, r1 ) 创建径向渐变

addColorStop( stop, color )  规定渐变对象中的颜色和停止位置

font  设置或返回文本内容的当前字体属性(和css的font一样)

textAlign  设置或返回文本内容的当前对齐方式

textBaseline  设置或返回在绘制文本时使用的当前文本基线

fillText( text, x, y )  在画布上绘制“被填充”的文本

strokeText( text, x, y )  在画布上绘制文本(无填充)

measureText( text )  返回包含指定文本宽度的对象(属性width获取宽度)

drawImage( image/canvas, x, y )、drawImage( image/canvas, x, y, width, height )、drawImage( image/canvas, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight )  在画布上绘制图像、画布或视频

createImageData( width, height )、createImageData(imageData)  绘制ImageData对象

getImageData( x, y, width, height )  返回ImageData对象,该对象为画布上指定的矩形复制像素数据。

putImageData( ImageData, x, y )、putImageData( imageData, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight )  把图像数据放回画布上。

width  返回ImageData对象的宽度

height  返回ImageData对象的高度

data  返回一个对象,包含指定的ImageData对象的图像数据

globalAlpha  设置或返回绘图的当前alpha或透明度

globalCompositeOperation  设置或返回新图像如何绘制到已有的图像上。

scale( x, y )  缩放当前绘图

translate( x, y )  重新设置画布上的(0,0)位置

rotate( angle )  选择当前绘图,单位为“弧度”,角度转弧度公式( degrees*Math.PI/180)

transform( m11, m12, m21, m22, dx, dy )  替换绘图的当前转换矩阵

setTransform()  将当前转换重置为单元矩阵,然后运行transform()

save()  保存当前环境的状态

restore()  恢复之前保存过的路径状态和属性

getContext('2d')  获取2d对象

toDataURL()  将canvas转换成图片,返回地址

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • css 对元素在文档中的排列的影响

        2)、position 的属性值为: absolute | relative,且 z-index 值不为 auto ;

    前端老鸟
  • 前端小知识点总结,助力你成功面试!

    1.Doctype的作用:此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。 2.严格模式与混杂模式如何区分?有何意义? 区分浏览器的使用的标准 ...

    前端老鸟
  • TCP 协议中的三次握手与四次挥手及相关概念详解

    1、TCP、UDP 协议的区别 2、TCP 头部结构 3、三次握手与四次挥手过程详解 4、什么是 TIME_WATI 状态

    前端老鸟
  • iOS/Android渠道统计详解,App推广必备

    App服务的竞争重点已经由功能竞争转向市场和运营的竞争,而App的推广与运营离不开App渠道统计的支持。

    走在河边的小鹿
  • Markdown的使用

    Howl
  • 干货 | Node.js 在转转的微服务实践(二)

    如今,Node.js 已经成为国际上许多科技公司的首选方案。特别对于在服务器端需要费阻塞特性的场景,Node.js 俨然成了最好的选择。

    五月君
  • SpringBoot中必须掌握的45个注解

    包含@Configuration、@EnableAutoConfiguration、@ComponentScan通常用在主类上;

    好好学java
  • 使用Wolfram元编程+编译 加速一类回溯算法

    数独游戏,一行代码搞定N皇后问题,0.1秒玩胜Matlab之父Cleve Moler的四阶幻方!

    WolframChina
  • 《selenium2 python 自动化测试实战》(7)——定位一组对象

    用户2149234
  • Leetcode 643. Maximum Average Subarray I

    版权声明:博客文章都是作者辛苦整理的,转载请注明出处,谢谢! https://blog.cs...

    Tyan

扫码关注云+社区

领取腾讯云代金券