Ping果狸的博客

Canvas样式讨论之fillStylefillStyle的赋值除了可以是color之外，还有可以有gradient、canvas 、img、video：gradientgradient分为线性渐变和径向渐变两种：线性渐变（Linear Gradient） 线性渐变是定义在两点之间，定义线性渐变主要有两个步骤： Step1 var grd = context.creat

Canvas 线条属性线条有四种属性：lineWidth：线宽lineCap：设置线条两端的形状。属性值可以为butt（标准，default）/ round / square lineCap的效果只能用于线段的开始处和结尾处，不能用于线段的连接处。lineJoin：线条和线条相交的时候所呈现出来的形态。属性值可以为miter（default）/ bevel / round。mit

Canvas绘制矩形context.rect ( x ,y ,width ,height ) //规划了矩形的路径 context.fillRect ( x ,y ,width ,height ) //根据fillStyle绘制出一个填充的矩形 context.strokeRect ( x ,y ,width ,height ) 根据strokeStyle绘制出一个矩形的边框conte

Canvas 绘制直线1.canvas绘图是一种基于状态的绘图，绘图的过程应该是先设置绘图的状态，再调用具体的函数进行绘制。 例如绘制一条（100,100）到（700,700）的直线：context.moveTo (100,100); //设置起点状态context.lineTo (700,700); //设置末端状态context.lineWidth = 5

phaser.js介绍phaser.js是一款跨平台的HTML5游戏开发引擎，支持以下平台和浏览器：桌面端 IE9+、Firefox、Chrome、Safari等 移动端 IOS5以上的Mobile Safari、安卓2.2以上的Stock Browser和Chrome等CocoonJS加速并打包成原生应用phaser.js的特征phaser.js内部支持pixi.j

Canvas绘制入门HTML5元素用于图形的绘制，通过脚本（通常是JavaScript）来完成 标签只是图形容器，要使用脚本来绘制图形canvas绘制步骤： 1、使用HTML来创建 HTML JavaScriptvar canvas = document.getElementById ('canvas');//获取canvas绘图上下文环境contextvar

Canvas之globalAlpha和globalCompositeOperationglobalAlphaglobalAlpha是使全局具有透明度 globalAlpha = 1 (default)globalCompositeOperationglobalCompositeOperation是渲染绘制的图像在重叠时的效果 globalCompositeOperation =

Canvas阴影Canvas提供四个接口设置阴影：设置阴影颜色：context.shadowColor设置阴影位移值：context.shadowOffsetX、context.shadowOffsetY（可以取负值，取负值时阴影在左、上方向）阴影模糊程度：context.shadowBlur context.fillStyle="#848"; context.

Canvas 文字渲染文字渲染基础：首先定义font属性，然后用fillText()对文字进行渲染。context.font = “bold 40px Arial”;context.fillText(string,x,y,[maxlen]);其中，fillText()的第一个参数是要书写的字符串，第二、三个参数是书写的位置，第四个参数是可选参数，它描述的是绘制这一行文字的最长宽度

Canvas 曲线绘制Canvas 曲线绘制有四种方式：arc()、arcTo ()、quadraticCurveTo()、bezierCurveTo()。1. arc()context.arc ( centerx,centery ,radius ,startingAngle ,endingAngle ,anticlockwise = false) 参数： - centerx

Canvas 图形变换图形学领域倾向于对于任何图形的绘制都先绘制图形的基本轮廓，再用图形变换的方式把它绘制成需求的大小。基本的图形变换：位移translate ( x ,y )：把图像原点位移到( x ,y )的位置旋转rotate ( deg )：旋转deg的度数缩放scale ( sx ,sy)：在横向进行sx倍的缩放，在纵向进行sy倍的缩放。scale缩放具有副作用，