canvas标签

最新推荐文章于 2022-07-15 17:18:38 发布

原创最新推荐文章于 2022-07-15 17:18:38 发布 · 265 阅读

CC 4.0 BY-SA版权

HTML5的canvas元素提供了一种使用JavaScript进行页面图像绘制的能力。你可以控制每个页面元素，包括绘制实心和空心矩形、圆形、文字以及添加图像。通过fillRect和strokeRect方法来创建矩形，fillStyle和strokeStyle定义颜色。圆形、文字和图像的绘制为canvas添加更多可能性，同时线性渐变进一步丰富了视觉效果。

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);