Canvas-2d入门

最新推荐文章于 2024-12-16 16:20:27 发布

lavender_32

最新推荐文章于 2024-12-16 16:20:27 发布

阅读量517

点赞数

CC 4.0 BY-SA版权

文章标签： canvas

本文链接：https://blog.youkuaiyun.com/lavender_32/article/details/82426255

本文介绍了HTML5的Canvas元素，用于在网页上使用JavaScript进行2D图形绘制。内容包括Canvas的基本概念、用途，如何在JavaScript中获取Canvas元素并创建2D渲染上下文，以及绘制线、圆弧、文字、渐变和图片的方法。通过实例展示了如何绘制一个圆的进度展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、canvas简介
canvas是用JavaScript绘制图形的标签，是Html5的特性；
2、canvas用处：
canvas的宽高在标签内设置，用样式设置导致图片压缩，并且不支持canvas时做兼容；

<canvas id="c1" width="500" height="300">
   <span style="color:red;">您的浏览器不支持此标签！ 请更换浏览器！</span>
</canvas>

由于canvas必须在JS中绘制，因此需要先在js中获得元素
var oC = document.getElementById(‘c1’);
var gd = oC.getContext(“2d”);
画线：

gd.beginPath();
gd.moveTo(100, 80);
gd.lineTo(400, 80);
gd.closePath(); // 可以形成闭合
gd.stroke();

画圆弧：

ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

写文字：

ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

渐变:

var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);

放入图片：

var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);

实例：
JavaScript

window.onload = function () {
     var oC3 = document.getElementById("c3");

     //1 获取绘图接口
     var gd3 = oC3.getContext("2d");
     //arc(x, y, radius, startAngle, endAngle, counterclockwise)
     //x, y 描述弧的圆形的圆心的坐标。
     //radius 描述弧的圆形的半径。
     //startAngle, endAngle 开始和结束的角度
     //逆时针为TRUE;顺时针为false
     var cx = 150;
     var cy = 150;
     var r = 100;

     var d = 0;
     var h = 60;

     gd3.lineWidth = "15";
     gd3.font = h + "px kaiti";
     gd3.fillStyle = "red";
     var timer = setInterval(function () {
         gd3.clearRect(0, 0, oC3.width, oC3.height);
         gd3.beginPath();
         gd3.arc(cx, cy, r, d2a(0), d2a(d++), false);
         gd3.strokeStyle = "rgba(" + 255 * d / 360 + ",0,0,1)";
         gd3.stroke();

         //写文字
         var str = Math.floor(d / 360 * 100) + "%";
         var w = gd3.measureText(str).width;
         gd3.fillText(str, cx - w / 2, cy + h / 2);

         if (d > 360) {
             clearInterval(timer);
         }
     }, 16);

 }
 function d2a(n) {
     return n * Math.PI / 180;
 }

html

<canvas id="c3" width="500" height="300">
   <span style="color:red;">您的浏览器不支持此标签！ 请更换浏览器！</span>
</canvas>

实现效果：
圆的进度展示
这里写图片描述