Canvas-2d入门

标签: canvas

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>

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

原文链接:加载失败,请重新获取