1. 首页
  2. IT资讯

前端必备知识点—Canvas(画布)

“u003Cdivu003Eu003Cpu003E今天小编将分享前端开发中必学的知识点,HTML5中关于Canvas(画布)的知识点;u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002F32170000e4a0234393b1″ img_width=”760″ img_height=”400″ alt=”前端必备知识点—Canvas(画布)” inline=”0″u003Eu003Cu002Fpu003Eu003Ch1u003E基本内容u003Cu002Fh1u003Eu003Cpu003ECanvas,是HTML5中所有新特性目前应用最广泛的一个标签,替代引入的图片(图形),用途非常广泛如(因此这个标签相当重要):u003Cu002Fpu003Eu003Cpu003E1.完成HTML页面中的图形绘制u003Cu002Fpu003Eu003Cpu003E2.实现网络游戏或单机游戏(网页游戏)u003Cu002Fpu003Eu003Cpu003E3.在HTML页面中绘制图表u003Cu002Fpu003Eu003Cpu003E4.饼状图u003Cu002Fpu003Eu003Cpu003E5.柱状图u003Cu002Fpu003Eu003Cpu003E6.折线图u003Cu002Fpu003Eu003Cpu003E7.网页游戏u003Cu002Fpu003Eu003Cpu003E…u003Cu002Fpu003Eu003Cpu003ECanvas的发展方向,目前主流的游戏开发引擎之一,如:白鹭引擎 – HTML5、Cocos-JS – HTML5、掌握物理系统、掌握精灵系统(地图)、HTML5网页游戏。u003Cu002Fpu003Eu003Cpu003E需要u003Cstrongu003E特别注意u003Cu002Fstrongu003E的是:Canvas作为HTML页面的元素出现、在Canvas绘制的图形与HTML页面是无关的、利用DOM定位绘制的图形、元素的事件不能绑定绘制的图形u003Cu002Fpu003Eu003Ch1u003E如何使用Canvas(分2步骤)u003Cu002Fh1u003Eu003Cpu003EHTML页面部分:定义<canvas>元素、建议使用width和height属性设置<canvas>元素的宽度和高度u003Cu002Fpu003Eu003Cpu003EJavaScript部分:获取HTML页面中的<canvas>元素、通过getContext()方法创建画布对象、该方法接收一个参数 – 创建二维或三维图形u003Cu002Fpu003Eu003Cpu003E需要u003Cstrongu003E特别注意u003Cu002Fstrongu003E的是u003Cstrongu003E:u003Cu002Fstrongu003E该参数为字符串类型、”2d”或”3d”中的”d”必须小写、目前几乎都是”2d”效果、使用Canvas提供的API完成需求。u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002F32030001e89cdc5eb8af” img_width=”554″ img_height=”404″ alt=”前端必备知识点—Canvas(画布)” inline=”0″u003Eu003Cu002Fpu003Eu003Ch1u003E常见的应用u003Cu002Fh1u003Eu003Ch1u003E应用一:绘制图形u003Cu002Fh1u003Eu003Cpu003Eu003Cstrongu003EfillRect(x,y,width,height) – 绘制实心矩形u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Ex和y – 表示绘制矩形的左上角的坐标值(x,y)u003Cu002Fpu003Eu003Cpu003Ewidth – 表示绘制矩形的宽度u003Cu002Fpu003Eu003Cpu003Eheight – 表示绘制矩形的高度u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003EstrokeRect(x,y,width,height) – 绘制空心矩形u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Ex和y – 表示绘制矩形的左上角的坐标值(x,y)u003Cu002Fpu003Eu003Cpu003Ewidth – 表示绘制矩形的宽度u003Cu002Fpu003Eu003Cpu003Eheight – 表示绘制矩形的高度u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003EclearRect(x,y,width,height) – 清除指定区域的矩形u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Ex和y – 表示绘制矩形的左上角的坐标值(x,y)u003Cu002Fpu003Eu003Cpu003Ewidth – 表示绘制矩形的宽度u003Cu002Fpu003Eu003Cpu003Eheight – 表示绘制矩形的高度u003Cu002Fpu003Eu003Cpu003E设置样式u003Cu002Fpu003Eu003Cpu003EfillStyle – 设置填充样式u003Cu002Fpu003Eu003Cpu003EstrokeStyle – 设置描边样式u003Cu002Fpu003Eu003Cpu003EglobalAlpha – 设置透明度(0-10-100-10-1000-10-1000000-10-10000-10-10000-10-10000-10-10000-10-1000-10-100000-100-100-1)u003Cu002Fpu003Eu003Cpu003E需要特别注意的是:先设置样式,再绘制图形,每改变一次样式,都需要重新设置样式,填充样式与描边样式互不干扰u003Cu002Fpu003Eu003Ch1u003E应用二:线性渐变u003Cu002Fh1u003Eu003Cpu003Eu003Cstrongu003EcreateLinearGradient(x1,y1,x2,y2)u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E线性渐变具有一个基准线u003Cu002Fpu003Eu003Cpu003E射线(扇形)渐变u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003EcreateRadialGradient(x1,y1,r1,x2,y2,r2)u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E射线渐变具有两个基准圆u003Cu002Fpu003Eu003Cpu003E设置渐变颜色u003Cu002Fpu003Eu003Cpu003EaddColorStop(position,color)方法u003Cu002Fpu003Eu003Cpu003Ecolor – 颜色u003Cu002Fpu003Eu003Cpu003E实现步骤如下:u003Cu002Fpu003Eu003Cpu003E1.设置线性渐变或扇形渐变u003Cu002Fpu003Eu003Cpu003E2.返回渐变对象u003Cu002Fpu003Eu003Cpu003E3.渐变对象设置渐变的颜色u003Cu002Fpu003Eu003Cpu003E4.设置填充或描边样式为渐变u003Cu002Fpu003Eu003Ch1u003E应用三:绘制文字u003Cu002Fh1u003Eu003Cpu003E设置属性:font – 用法与CSS中的font一致u003Cu002Fpu003Eu003Cpu003E对齐方式:u003Cu002Fpu003Eu003Cpu003EtextAlign – 水平对齐u003Cu002Fpu003Eu003Cpu003Eleft – 基准线在文字的左边u003Cu002Fpu003Eu003Cpu003Ecenter – 基准线在文字的中间u003Cu002Fpu003Eu003Cpu003Eright – 基准线在文字的右边u003Cu002Fpu003Eu003Cpu003EtextBaseline – 垂直对齐u003Cu002Fpu003Eu003Cpu003Etop – 基准线在文字的上边u003Cu002Fpu003Eu003Cpu003Emiddle – 基准线在文字的中间u003Cu002Fpu003Eu003Cpu003Ebottom – 基准线在文字的下边u003Cu002Fpu003Eu003Cpu003Ehanging – 悬挂基线u003Cu002Fpu003Eu003Cpu003Ealphabetic – 字母基线u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E绘制方法u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003EfillText(text,x,y) – 绘制实心文字u003Cu002Fpu003Eu003Cpu003Etext – 设置绘制的文字内容u003Cu002Fpu003Eu003Cpu003Ex和y – 设置绘制文字的坐标值u003Cu002Fpu003Eu003Cpu003EstrokeText(text,x,y) – 绘制空心文字u003Cu002Fpu003Eu003Cpu003Etext – 设置绘制的文字内容u003Cu002Fpu003Eu003Cpu003Ex和y – 设置绘制文字的坐标值u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E设置阴影u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003EshadowColor – 设置阴影颜色u003Cu002Fpu003Eu003Cpu003EshadowOffsetX – 设置阴影水平位置u003Cu002Fpu003Eu003Cpu003E正值 – 阴影向右移动、0 – 阴影不移动、负值 – 阴影向左移动u003Cu002Fpu003Eu003Cpu003EshadowOffsetY – 设置阴影垂直位置u003Cu002Fpu003Eu003Cpu003E正值 – 阴影向下移动、0 – 阴影不移动、负值 – 阴影向上移动u003Cu002Fpu003Eu003Cpu003EshadowBlur – 设置阴影的程度u003Cu002Fpu003Eu003Cpu003E值的类型为Number、值越大,阴影效果越明显u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002F320000007089826e007c” img_width=”640″ img_height=”380″ alt=”前端必备知识点—Canvas(画布)” inline=”0″u003Eu003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:前端必备知识点—Canvas(画布)

主题测试文章,只做测试使用。发布者:℅傍ㄖ免沦陷dε鬼,转转请注明出处:http://www.cxybcw.com/11266.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code