HTML5 canvas绘图

作者: 微语博客 | 来源:发表于2021-06-11 23:27 被阅读0次

简介

HTML5新增了canvas元素,我们可以利用canvas绘制各种图形文本图表等,熟悉使用canvas还可以写出各种多彩的特效。

<canvas>只是声明一张画布,本身并没有绘图能力,我们需要利用JS来实现绘图。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>  
  <canvas id="canvas" width="480" height="360">您的浏览器不支持canvas</canvas>

</body>
</html>

使用JS来绘制图形

从上面的步骤我们创建了一个画布,现在我们开始利用JS获取到元素,然后绘制一个简单的图形。

<canvas id="canvas" width="480" height="360">您的浏览器不支持canvas</canvas>
  <script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle="#FF0000";//填充色
    ctx.fillRect(0,0,200,200);//填充
    ctx.strokeStyle="#0000FF";//画笔色
    ctx.moveTo(0,0);
    ctx.lineTo(200,200);
    ctx.stroke();//描线
  </script>

下面绘制一个圆形

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);//绘制圆形
ctx.stroke();

上面是一个简单填充和描线的案例,我们需要熟记一些常用的方法,才能流畅绘图。

canvas绘制文本

除了图形,canvas还可以绘制文本,使用fillText(text,x,y)方法填充实心文本,stroke(text,x,y)方法绘制空心文本。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle="#FF0000";
ctx.font="30px Arial";
ctx.fillText("Hello",20,50);//填充文本
ctx.strokeStyle="#0000FF";
ctx.strokeText("你好",100,50);//绘制文本

canvas创建渐变

canvas可以填充各种形状,也可以创建渐变色填充。createLinearGradient(x,y,x1,y1)创建线性渐变,createRadialGradient(x,y,r,x1,y1,r1)创建径向渐变。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 创建渐变
var gdt=ctx.createLinearGradient(0,0,200,0);
gdt.addColorStop(0,"#FF0000");
gdt.addColorStop(1,"#0000FF");

// 填充渐变
ctx.fillStyle=gdt;
ctx.fillRect(20,20,170,120);

径向渐变

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 创建渐变
var gdt=ctx.createRadialGradient(100,75,5,120,90,100);
gdt.addColorStop(0,"#FF0000");
gdt.addColorStop(1,"#0000FF");
    
// 填充渐变
ctx.fillStyle=gdt;
ctx.fillRect(20,20,170,100);

canvas绘制图像

除了绘制图形,canvas还能将已有的图像资源放入画布中,使用drawImage(image,x,y)方法绘制图像。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = document.getElementById('img');
ctx.drawImage(img,20,20);//绘制图像资源

相关文章

网友评论

    本文标题:HTML5 canvas绘图

    本文链接:https://www.haomeiwen.com/subject/jekweltx.html