[H5]CanvasRanderingContext2D整理


CanvasRanderingContext2D接口用来在canvas元素上绘制矩形,文本,图片或其他对象。它为在<canvas>元素表面上绘图提供了2D渲染上下文

调用<canvas>元素的getContext()方法,加入"2d"作为参数可以获得这个接口的实例。

canvas = document.getElementById('mycanvas'); // in your HTML this element appears as <canvas id="mycanvas"></canvas>
var ctx = canvas.getContext('2d');

Rect

  • clearRect(x,y,w,h) 清除矩形
  • fillRect(x,y,w,h) 绘制实心矩形
  • strokeRect(x,y,w,h) 绘制空心矩形

Text

  • fillText(text,x,y) 绘制文字
  • strokeRect(text,x,y)绘制空心文字
  • measureText(text) 获取文字的textMetrics属性,可以用来获取文字宽度等属性

Path

  • beginPath() 新建一个路径
  • closePath() 闭合一个路劲,从当前终点向起点绘制一条直线
  • moveTo(x,y) 把指针移到指定坐标
  • lineTo(x,y) 从当前位置到指定位置绘制一条直线
  • bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 通过2个控制点和一个终点位置绘制贝塞尔曲线
  • quadraticCurveTo(cpx, cpy, x, y) 二次贝塞尔曲线,需要控制点和终点
  • arc(x, y, radius, startAngle, endAngle, anticlockwise) 在指定坐标(x,y)绘制一个半径为r的从startAngle到endAngle的圆弧,绘制方向由anticlockwise决定(默认顺时针)
  • arcTo(x1, y1, x2, y2, radius) 通过给定控制点和半径绘制圆弧,用直线连接前2个点
  • ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) 以为(x,y)我中心,以radiusX和radiusY为半径,起始于startAngle,结束于endAngle,方向由anticlockwise决定(默认顺时针)绘制一个椭圆
  • rect(x,y,w,h) 在(x,y)绘制一个大小为(w,h)的矩形

Drawing paths

  • fill() 填充方式
  • stroke() 画笔方式
  • drawFocusIfNeeded() 如果给定元素获得焦点,在当前路径上绘制焦点环绕
  • clip() 所有在clip()绘制的图形都会出现在clipping path里
  • isPointInPath(x,y) 验证指定点是否在当前路劲内
  • isPointInStroke(x,y) 验证指定点是否在一个画笔轨迹内。

测试代码下载

推荐阅读更多精彩内容

  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 4,357评论 2 32
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    Looog阅读 3,506评论 3 40
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    J_L_L阅读 1,305评论 0 4
  • --绘图与滤镜全面解析 概述 在iOS中可以很容易的开发出绚丽的界面效果,一方面得益于成功系统的设计,另一方面得益...
    韩七夏阅读 2,473评论 2 10
  • 2017 【新年了】 转眼就到了除夕,不管是不是准备好,都只有马不停蹄和时光齐头并进。新年里,愿家人平安健康,学业...
    你在看我的个人资料吗阅读 73评论 0 0