HTML5 - Canvas（二）

时间：2020-08-10 12:40:31 阅读：77 评论：0 收藏：0 [点我收藏+]

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（二）

原文：https://www.cnblogs.com/xdy-/p/13467558.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)