HTML5 - Canvas(二)

HTML5 Canvas

  • HTML5 <canvas> 元素用于图形的绘制,通过脚本(通常是 Javascript)来完成
  • HTML5 <canvas> 标签只是图形容器,您必须使用脚本来绘制图形
  • 可以通过多种方法使用 canvas 绘制路径、盒、圆、字符以及添加图像

Canvas - 画布

<!DOCTYPE html>
<html>
    <head>
        <meta cahrset="UTF-8">
        <title>创建一个画布</title>
    </head>
    <body>
        <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
    </body>
</html>

Canvas - 图像

<!DOCTYPE html>
<html>
    <head>
        <meta cahrset="UTF-8">
        <title>使用 Javascript 创建一个画布</title>
    </head>
    <body>
        <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
        <script>
            var c=document.getElementById("myCanvas");
	    var ctx=c.getContext("2d");
	    ctx.fillStyle="#FF0000";
	    ctx.fillRect(0,0,150,75);
        </script>
    </body>
</html>

Canvas - 坐标

  • Canvas 是一个二维网格
  • Canvas 的左上角坐标为(0,0)
  • 以上 fillRect 方法拥有参数 (0,0,150,75) 代表在画布上绘制 150 × 75 的矩形,从左上角 (0,0) 开始

Canvas - 路径

在 Canvas 上画线,我们使用以下两种方法:

  • moveTo(x,y) 定义线条开始坐标
  • lineTo(x,y) 定义线条结束坐标
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Canvas - 路径</title>
    </head>
    <body>
        <p>
            画路径
        </p>
        <canvas id="myCanvas" width="200" height="100" style="border:1px solid red"></canvas>
        <script>
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            ctx.moveTo(0,0);
            ctx.lineTo(200,100);
            ctx.stroke();
        </script>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Canvas - 路径</title>
    </head>
    <body>
        <p>
            画圆
        </p>
        <canvas id="myCanvas" width="200" height="100" style="border:1px solid red"></canvas>
        <script>
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            ctx.beginPath(0,0);
            ctx.arc(95,50,40,0,2*Math.PI);
            ctx.stroke();
        </script>
    </body>
</html>

Canvas - 文本

使用 Canvas 绘制文本,重要的属性和方法如下:

  • font - 定义字体
  • fillText(text,x,y) - 在 canvas 上绘制实心的文本
  • strokeText(text,x,y) - 在 canvas 上绘制空心的文本
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Canvas - 文本</title>
    </head>
    <h4>
        使用 Arial 字体在画布上绘制一个实心文字
    </h4>
    <canvas id="myCanvas1" width="200" height="100" style="border:1px solid green"></canvas>
    <script>
    	var c = document.getElementById("myCanvas1");
        var ctx = c.getContext("2d");
        ctx.font="30px Arial";
        ctx.fillText("Hello World",10,50);
    </script>
    <h4>
        使用 Arial 字体在画布上绘制一个空心文字
    </h4>
    <canvas id="myCanvas2" width="200" height="100" style="border:1px solid green"></canvas>
    <script>
    	var c = document.getElementById("myCanvas2");
        var ctx = c.getContext("2d");
        ctx.font="30px Arial";
        ctx.strokeText("Hello World",10,50);
    </script>
</html>

Canvas - 渐变

以下由两种方法用来设置 Canvas 渐变:

  • createLinearGradient(x,y,x1,y1) - 创建线条渐变
  • createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

注意:当我们使用渐变对象时,必须使用两种或两种以上的停止颜色。addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Canvas - 渐变</title>
    </head>
    <body>
        <h4>
            创建一个线性渐变,使用渐变填充矩形
        </h4>
        <canvas id="myCanvas1" width="200" height="100" style="border:1px solid blue"></canvas>
        <script>
            var c = document.getElementById("myCanvas1");
            var ctx = c.getContext("2d");
            // 创建渐变
            var grd = ctx.createLinearGradient(0,0,200,0);
            grd.addColorStop(0,"red");
            grd.addColorStop(1,"green");
            // 填充渐变
            ctx.fillStyle = grd;
            ctx.fillRect(10,10,150,80);
        </script>
        <h4>
            创建一个径向/圆渐变,使用渐变填充矩形
        </h4>
        <canvas id="myCanvas2" width="200" height="100" style="border:1px solid blue"></canvas>
        <script>
            var c = document.getElementById("myCanvas2");
            var ctx = c.getContext("2d");
            // 创建渐变
            var grd = ctx.createRadialGradient(75,50,5,90,60,100);
            grd.addColorStop(0,"red");
            grd.addColorStop(1,"green");
            // 填充渐变
            ctx.fillStyle = grd;
            ctx.fillRect(10,10,150,80);
        </script>
    </body>
</html>

Canvas - 图片

把一张图片放在画布上,使用以下方法:

  • drawImage(image,x,y)
<!DOCTYPE html>
<html>
	<head>?
	    <meta?charset="utf-8">?
	    <title>Canvas - 图片</title>?
	</head>
	<body>
	    <p>Image to use:</p>
	    <img id="scream" src="default.jpg" alt="The Scream" width="220" height="277">
        <p>Canvas:</p>
		<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
        </canvas>
		<script>
			var c=document.getElementById("myCanvas");
			var ctx=c.getContext("2d");
			var img=document.getElementById("scream");
			img.onload = function() {
			ctx.drawImage(img,10,10);
			} 
		</script>
	</body>
</html>

HTML5 - Canvas(二)

上一篇:Python之路-python(装饰器、生成器、迭代器、Json & pickle 数据序列化、软件目录结构规范)


下一篇:MVC和MVVC