首页 > 代码库 > canvas入门-1三种填充方式、渐变、模式

canvas入门-1三种填充方式、渐变、模式

2024-07-13 11:20:36   222人阅读

1、定义canvas的尺寸的时候最好用html的方式定义，用width和height的方式，用css会导致画布按照css设定的方式进行缩放，cavas内部是一个2d的渲染环境

2、一个canvas对应一个2d的渲染环境，绘制图形的操作都是在2d渲染环境中进行的

<canvas id="canvas-1"  style="border:solid 1px gray;" width = "400" height="400"></canvas>

　　一个简单的例子

        <script type="text/javascript">		var oCanvas = document.getElementById(‘canvas-1‘);		var context = oCanvas.getContext(‘2d‘);//指向2d渲染环境的引用		context.fillStyle = "#FF0000";		context.fillRect(20,20,100,200)	</script>
在400*400 的画布上绘制一个距离左边上边20px的一个100*200的矩形用#ff0000颜色填充

　　canvas的2d环境有很多api可以调用

3、fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式，上面我们直接用个的颜色，渐变指的是一个颜色渐变对象

a.首先是context创建一个线性的渐变createLinearGradient()  b.然后设置渐变的范围 createLinearGradient() 3.设定颜色渐变的阶段值(addColorStop())

                var grd=context.createLinearGradient(0,0,170,0);//这是一个从左到右的渐变		grd.addColorStop(0,"black");		grd.addColorStop(0.5,"red");		grd.addColorStop(1,"white");//从黑-->红-->白		context.fillStyle = grd;		context.fillRect(0,0,150,100)

　　

var my_gradient=ctx.createLinearGradient(0,0,0,170);//从上到下my_gradient.addColorStop(0,"black");my_gradient.addColorStop(1,"white");

　　

                context.fillRect(0,0,200,200);		var grd=context.createLinearGradient(0,0,200,200);对角线渐变		grd.addColorStop(0,"black");		grd.addColorStop(0.5,"red");		grd.addColorStop(1,"white");		context.fillStyle = grd;		context.fillRect(0,0,200,200);

4、填充模式

用模式去填充图片createPattern(img,direction)；

接收2个参数，img对象，和方向的参数repeat repeat-x repeat-y

很奇怪的是我们首次运行的时候并不能绘制出来，而是通过绑定事件的方式就可以绘制出来，

必须在最后加上context.fill()这个函数，否则无法绘制。

<img src="http://www.mamicode.com/tet.jpg" id="img" onclick="test()">

　　

　　　function test () {			var direction = ‘repeat‘ || ‘repeat-x‘ || ‘repeat-y‘;			var img = document.getElementById(‘img‘);			var pat = context.createPattern(img,direction);			context.rect(0,0,400,400);			context.fillStyle=pat;			context.fill();		}

　　


联系
我们