HTML 画布

简介

  • HTML5 canvas 元素作用是在网页上绘制图形;
  • HTML5 canvas 仅仅是图形的容器,必须使用 JavaScript 脚本来完成绘图任务;
  • HTML5 canvas 能绘制路径、矩形、圆形、字符等多种图案要素。

兼容性

IE8 及更早的版本不支持 <canvas> 元素。

Canvas 创建

1、首先向页面放置 <canvas> 元素对象;
2、获得 canvas 元素对象;
3、获得 canvas 元素 2D 绘图上下文对象;
4、通过 2D 上下文对象绘制一个绿色的圆形;

<style>
   .canvasArea {
       width: 30%;
       height: 100px;
       border: 1px solid green;
   }
</style>
<canvas id="myCanvas" class="canvasArea"></canvas>
<script type="text/javascript">
	var c = document.getElementById("myCanvas");
	var cxt = c.getContext("2d");
	cxt.fillStyle = "#4faa2a";
	cxt.fillRect(0,0,200,100);
</script>

Canvas 坐标

Canvas 的坐标是一个二维坐标,左上角坐标原点是 (0,0),原点沿 X 轴向左是负值、向右是正值,原点沿 Y 轴向左是负值、向下是正值;

Canvas 填充

fillStyle 属性设置填充绘画的颜色、渐变或图案,默认值是#000000(黑色);
颜色
实例:填充一个绿色矩形;

<canvas id="canvasColor"></canvas>
<script type="text/javascript">
	var c = document.getElementById("canvasColor");
	c.width = 500;
	c.height = 100;
	var ctx = c.getContext("2d");
	ctx.fillStyle = "green";
	ctx.fillRect(0,0,150,100);
</script>

效果:

渐变
渐变分线性和放射性两种:

  • 使用 createLinearGradient(x0,y0,x1,y1) 创建线性渐变,x0,y0是开始点,x1,y1是结束点;
  • 使用 createRadialGradient(x0,y0,r0,x1,y1,r1) 创建放射性渐变,x0,y0 是开始圆点,r0是开始圆半径,x1,y1是结束圆点,r1是结束圆的半径;
  • 两种渐变都使用 addColorStop(stop,color) 作为渐变的颜色层;stop 表示渐变中开始与结束之间的位置(值范围:0.0~1.0),color 表示颜色值;
    代码:

    <canvas id="cvLinearGradient"></canvas><br>
    <canvas id="cvRadialGradient"></canvas>
    <script type="text/javascript">
        var c = document.getElementById("cvLinearGradient");
        c.width = 500;
        c.height = 120;
        var ctx = c.getContext("2d");
        var grd = ctx.createLinearGradient(0,0,150,0);
        grd.addColorStop(0,"green");
        grd.addColorStop(0.2,"blue");
        grd.addColorStop(0.6,"magenta");
        grd.addColorStop(1,"yellow");
        ctx.fillStyle = grd;
        ctx.fillRect(0,0,150,100);
        var grd2 = ctx.createLinearGradient(0,0,0,100);
        grd2.addColorStop(0,"green");
        grd2.addColorStop(0.2,"blue");
        grd2.addColorStop(0.6,"magenta");
        grd2.addColorStop(1,"yellow");
        ctx.fillStyle = grd2;
        ctx.fillRect(160,0,150,100);
        var c = document.getElementById("cvRadialGradient");
        c.width = 500;
        c.height = 100;
        var ctx = c.getContext("2d");
        var grd = ctx.createRadialGradient(50,50,10,50,50,50);
        grd.addColorStop(0,"red");
        grd.addColorStop(0.4,"green");
        grd.addColorStop(1,"blue");
        ctx.fillStyle = grd;
        ctx.fillRect(0,0,150,100);
        var grd2 = ctx.createRadialGradient(210,30,10,210,60,50);
        grd2.addColorStop(0,"red");
        grd2.addColorStop(0.4,"green");
        grd2.addColorStop(1,"blue");
        ctx.fillStyle = grd2;
        ctx.fillRect(160,0,150,100);
        var grd3 = ctx.createRadialGradient(380,50,50,380,50,10);
        grd3.addColorStop(0,"red");
        grd3.addColorStop(0.4,"green");
        grd3.addColorStop(1,"blue");
        ctx.fillStyle = grd3;
        ctx.fillRect(320,0,150,100);
    </script>
    

    效果:

图案
将一幅图像放到 canvas 里面;

<canvas id="canvasImage"></canvas>
<script type="text/javascript">
var img = new Image();
img.src = "/images/tags/cite/mona-lisa.jpg";
img.onload = function() {
    var canvas = document.querySelector("#canvasImage");
    var cxt = canvas.getContext("2d");
    canvas.width = 200;
    canvas.height = 280;
    cxt.drawImage(img, 0, 0, canvas.width, canvas.height);
  }
</script>

效果:

Canvas 图形

线条
使用 moveTo(x,y) 定义线条开始坐标,lineTo(x,y) 定义线条结束坐标,然后使用 stroke() 方法,代码:

<canvas id="canvasLine" class="canvasArea"></canvas>
<script type="text/javascript">
var c = document.getElementById("canvasLine");
var ctx = c.getContext("2d");
ctx.strokeStyle = "#4faa2a";
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.stroke();
</script>

效果:

圆弧和圆形
使用:beginPath() 和 arc(x,y,r,start,stop) 画圆或者弧,x,y 是圆心位置,r 是半径,start 是开始角度,stop 是结束角度,代码:

<canvas id="canvasArc" class="canvasArea"></canvas>
<script type="text/javascript">
	var c = document.getElementById("canvasArc");
	var ctx = c.getContext("2d");
	ctx.beginPath();
	ctx.arc(95,50,40,0,2*Math.PI);
	ctx.strokeStyle = "#4faa2a";
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(95,100,40,0,Math.PI);
	ctx.strokeStyle = "red";
	ctx.stroke();
</script>

效果:

矩形
有三种方法可以创建矩形:

  • 使用 rect(x,y,width,height) 创建矩形;x和y是矩形开始位置,width 和 height 是矩形的宽和高;单此方法不会渲染出矩形,还要通过 stroke() 或者 fill() 方法才会渲染图形;
  • 使用 strokeRect(x,y,width,height) 能一步到位创建描边矩形;
  • 使用 fillRect(x,y,width,height) 此方法能一步创建填充矩形;

实例:

<canvas id="canvasRect" class="canvasArea"></canvas>
<script type="text/javascript">
	var c = document.getElementById("canvasRect");
	var ctx = c.getContext("2d");
	ctx.rect(20,20,200,100);
	ctx.strokeStyle = "#4faa2a";
	ctx.stroke();
	ctx.strokeStyle = "#FF0000";
	ctx.strokeRect(30,30,150,80);
	ctx.fillStyle = "blue";
	ctx.fillRect(40, 40, 130, 60);
</script>

效果:

Canvas 文本

绘制文本,首先使用 font 属性定义字体语法和 CSS 属性设置相同,然后使用 fillText(text,x,y) 方法绘制实心的文本或者 strokeText(text,x,y) 绘制空心的文本,text 表示要绘制的文本,x和y表示开始从那个点开始绘制;

<canvas id="canvasText"></canvas>
<script type="text/javascript">
	var c = document.getElementById("canvasText");
	c.width = 500;
	c.height = 150;
	var ctx = c.getContext("2d");
	ctx.font="italic bold 30px arial";
	ctx.fillStyle = "green";
	ctx.fillText("TXTech is a technology website",10,50);
	ctx.strokeStyle = "green";
	ctx.strokeText("TXTech is a technology website",10,80);
</script>

效果:

留下评论

电子邮件地址不会被公开。 必填项已用*标注