H5-canvas

canvas用于在网页上绘制图形。(通常通过脚本语言javascript)

1.在HTML中创建<canvas id='myCanvas'></canvas>

2.在js中获取canvas    canvas= document.getElementById('myCanvas');

3.创建context对象(拥有多种绘制路径.矩形.圆形.字符及添加路径的方法) context = canvas.getContext('2d');

4.接下来就是各种属性和方法

4.1颜色.样式和阴影

属性:fillstyle,strokestyle,shadowstyle,shadowblur,shadowoffsetX,shadowoffsetY

方法:createLinearGradient(),createPatten(),createRadialGradient(),addColorStop()

4.2线条样式

属性:lineCap.lineJoin,lineWidth,lineLimit

方法:rect(),fillRect(),strokeRect(),clearRect()

4.3路径

方法:fill(),stroke(),beginPath(),move To(),closePath(),line To(),clip(),arc()

4.4转换

方法:scale(),rotate(),translate(),transform(),setTransform()

4.5文本

属性:font,textAlign,textBaseline

方法:fillText(),strokeText(),measureText()

4.6图像绘制

drawImage()

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 4,707评论 2 32
  • canvas基本标签 < /canvas>宽高写在内部跟样式有区别的(样式设置-画出的图形宽高改变,内部设置-画出...
    闫子扬阅读 459评论 0 0
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    Looog阅读 3,953评论 3 40
  • //fillStyle属性设置或返回用于填充绘画的颜色、渐变或模式。 /*一个用蓝色填充的矩形 ctx.fillS...
    靳刘杰阅读 337评论 0 0
  • canvas是H5非常受欢迎的功能,利用 标签在页面中设定一个区域,然后就可以在这个区域中绘制图形 基本用法 首先...
    baiying阅读 709评论 1 2