canvas标签

H5 canvas画布

HTML 5 的canvas元素是

• Javascript页面绘制图像 的画布
• 画布上一个矩形，可以控制页面的每一个元素
• 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法等。

1、 首先创建一个画布（canvas），
获取canvas标签
创建一个对象，对画布开始描绘

<canvas id="canvas">
您的浏览器不支持canvas标签！
</canvas>
    <script>
        var canvas = document.getElementById("canvas")
            //创建获取画布对象(画笔)
        var cxt = canvas.getContext("2d")
    </script>

1、 绘制矩形：实心 / 空心
fillRect：表示实心矩形
fillStyle： 表示实心矩形的颜色
strokeRect：表示空心矩形
strokeStyle“表示空心矩形的颜色

其中，fillRect有四个参数，依次分别是在画布上x，y，矩形的width ，height。矩形的默认颜色是黑色，
且必须写在样式之前。

		cxt.fillStyle = "red"
        cxt.fillRect(10, 10, 100, 100);// 实心矩形
        //空心圆同理

2、绘制圆形

			//创建一个路径
			context.beginPath()
			context.arc(280,60,50,0,Math.PI * 1.8);
			context.closePath();//关闭路径
			context.stroke()

3、绘制文字

			context.shadowBlur = 5;//设置阴影模糊度
			context.shadowColor = "red";//颜色
			//阴影模糊的与字体的距离
			context.shadowOffsetX = -20;
			context.shadowOffsetY = -20;
			context.font = "40px 微软雅黑";
//			//可以设置文字对齐
//			context.textAlign = "center";
			context.fillText("随便",200,150);

4、在画布中添加图片

			var myimg = new Image();
			myimg.src = "图片的路径";
			//利用onload 事件预加载图片才能显示
			myimg.onload = function(){
				context.drawImage(myimg,10,10,300,300);
			}

5、线性渐变

			var grad = cxt.createLinearGradient(0,0,400,300);//
			grad.addColorStop(0,"red");//透明度，颜色
			grad.addColorStop(1,"blue");
			
			cxt.fillStyle = grad;
			cxt.fillRect(0,0,400,300);