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

Canvas

时间:2020-03-20 21:59:49      阅读:112      评论:0      收藏:0      [点我收藏+]

标签:通过   timeout   val   重绘   mic   相同   lock   sans   使用   

技术图片

Canvas是一个可以使用脚本(通常是JavaScript )来绘制图形的HTML元素, <canvas> 元素的基本语法结构是:

<canvas width="宽度" height="高度" id="ID">
</canvas>

canvas的属性:

(1)width:  

//获取宽度
variable = HTMLCanvasElement.width
//设置宽度
HTMLCanvasElement.width = number value

 (2)height:

//获取高度
variable = HTMLCanvasElement.height

//设置高度
HTMLCanvasElement.height = number value

 canvas的方法:

(1)getContext()

getContext()方法用于返回 canvas 的上下文,如果上下文没有定义,则返回null,其语法结构是:

 

variable = HTMLCanvasElement.getContext(contextType)

上下文的取值有:

  1. ‘2d‘,此时将建立一个 CanvasRenderingContext2D 二维渲染上下文对象
  2. ‘webgl‘,此时将建立一个 WebGLRenderinContext 三维渲染上下文对象

 

 ① CannvasRenderingContext2D:

  CanvasRenderingContext2D对象提供了2D渲染背景用来绘制 Canvas 元素,为了获取这个对象,需要canvas 对象上调用getContext() 方法,并且提供"2d"参数:

//1.获取Canvas元素(画布)
var canvasEle = document.getElementById(‘canvas‘);

//2.获取CanvasRenderingContext2D对象(工具箱) 
var ctx = canvasEle.getContext(‘2d‘);

CannvasRenderingContext2D的方法:

1.绘制矩形:

    ① strokeRect()方法:strokeRect()方法用于绘制矩形框,其语法结构是

CanvasRenderingContext2D.strokeRect(x,y,width,height)

    ② clearRect()方法:用于擦除指定区域所绘制的内容

CanvasRenderingContext2D.clearRect(x,y,width,height)

    ③ fillRect()方法:用于绘制填充矩形

CanvasRenderingContext2D.fillRect(x,y,width,height)

2.描边和填充

(1)stroke属性:用于设置描边颜色,默认值#000

CanvasRenderingContext2D.strokeStyle = string color

颜色的表示方法有:

  英文名称

  十六位进制代码,如#f00#89af56 RGB模式,如rgb(255,0,0)

  RGBA模式,如rgba(255,0,0,0.7)

(2) fillStyle属性:用于设置填充颜色

CanvasRenderingContext2D.fillStyle = string color

3.文本的描边与填充:

(1)fillText方法:用于绘制填充文本

canvasRenderingContext2D.fillText(text,x,y)

(2)strokeText()方法:用于绘制描述文本:

canvasRenderingContext2D.strokeText(text,x,y)

(3)font属性:用于设置文本样式:

canvasRenderingContext2D.font = "字号 字体"

默认字号为10像素;默认字体 sans-serif

文本样式与CSS font规范相同

(4)textAlign属性:用于设置文本的对齐方式:

canvasRenderingContext2D.textAlign = ‘left|center|right‘

(5)measureText()方法:获取文本对象

MeasureText canvasRenderingContext2D.measureText(‘内容’)

//该对象存在width属性,用于获取文本对象的宽度
int MeasureText.width

 

window对象

1 requestAnimationFrame()方法:

  window.requestAnimationFrame()方法是浏览器用于定时循环操作的一个方法,类似于setTimeout() 方法,主要用途是按帧对于网页进行重绘。其目是为了让各种网页动动效果(DOM画、Canvas动画等)能够有统一的刷新机制,从而节省系统资源。requestAnimationFrame()的优势是     充分利用显示器的刷新机制,所以动画就不再会出现卡顿的现象了。一旦页面不处于浏览器的当前标     签,就会自动停止刷新。其语法结构是:

 

timerId = window.requestAnimationFrame(animation);

 

 

2 cancelAnimationFrame()方法:

  cancelAnimationFrame()方法用于取消一个先前通过调用window.requestAnimationFrame()方法中生成ID,其语法结构是:

 

window.cancelAnimationFrame(requestId)

 

浏览器兼容问题:

cancelAnimationFrame = window.cancelAnimationFrame ||
window.mozCancelAnimationFrame();

 

Canvas

标签:通过   timeout   val   重绘   mic   相同   lock   sans   使用   

原文地址:https://www.cnblogs.com/codexlx/p/12519863.html

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