HTML5 Canvas

最新推荐文章于 2021-09-14 22:21:16 发布

喵叻个汪

最新推荐文章于 2021-09-14 22:21:16 发布

阅读量114

点赞数 1

本文链接：https://blog.csdn.net/weixin_43752668/article/details/87736002

版权

什么是canvas

< canvas > 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。

使用canvas如何绘图

创建canvas画布
获取canvas画布
动态操作canvas画布
将canvas画布转为2d模式
使用Javascript提供的API绘制图像

示例代码：

<body>
//创建canvas画布
<canvas id="can"></canvas>
<script>
    //获取canvas画布
    var can=document.getElementById("can");
    //获取浏览器可视区域宽高
    var window_w=document.documentElement.clientWidth;
    var window_h=document.documentElement.clientHeight;
    //动态设置canvas画布的宽高
    can.width=window_w;
    can.height=window_h;
    //将canvas转为2d模式
    var content=can.getContext("2d");
    //使用Javascript提供的API绘制
    
//例1：
//绘制线条
    //设置线宽
    content.lineWidth=5;
    //设置颜色
    content.strokeStyle="red";
    //画线的坐标
    content.moveTo(0,0);
    content.lineTo(400,400);
    //填充线条
    content.stroke();

//例2：鼠标点击移动绘制线条
//鼠标下落事件
document.body.onmousedown= function (e) {
        //获取鼠标坐标作起始点
        var x= e.pageX;
        var y= e.pageY;
        content.moveTo(x,y);
        content.stroke();
        //鼠标移动事件
        this.onmousemove= function (e) { 
            //获取鼠标坐标作为终点
            var x1= e.pageX;
            var y1= e.pageY;
            content.lineTo(x1,y1);
            content.stroke()
        }
    };
    //鼠标抬起事件 清除鼠标移动事件
    document.body.onmouseup= function () {
        this.onmousemove=null;
    }

//例3：绘制矩形
//设置填充面积的颜色
    content.fillStyle="red";
    //设置线宽
    content.lineWidth=3;
    //设置填充线的颜色
    content.strokeStyle="blue";
    //绘制矩形 起点坐标为200，200，宽高为400，200
    content.strokeRect(200,200,400,200);
    //填充矩形 起点坐标为200，200，宽高为400，200
    content.fillRect(200,200,400,200);
    //填充
    content.fill();
    //清除矩形填充
    content.clearRect(300,300,10,10)

//例4：绘制圆形
    //设置填充颜色
    content.fillStyle="red";
    //绘制圆形 圆心坐标x，y,半径，起始角度，终止角度，顺时钟绘制
    content.arc(700,400,100,0,Math.PI*2,true);
    content.fill();

//添加渐变色
    //线性渐变
//    var red=content.createLinearGradient(700,200,10,700,200,300);
    //圆形渐变
    var red=content.createRadialGradient(700,200,10,700,200,300);
    //渐变色设置
    red.addColorStop(0,"red");
    red.addColorStop(0.1,"orange");
    red.addColorStop(0.2,"yellow");
    red.addColorStop(0.3,"green");
    red.addColorStop(0.4,"blue");
    red.addColorStop(0.5,"purple");
    red.addColorStop(0.6,"red");
    red.addColorStop(0.7,"orange");
    red.addColorStop(0.8,"yellow");
    red.addColorStop(0.9,"green");
    red.addColorStop(1.0,"blue");
    //设置填充颜色
    content.fillStyle=red;
    content.arc(700,200,200,0,Math.PI*2,true);
    content.fill();
    
//例4：绘制图像
    //创建图像
    var img=document.createElement("img");
    //设置图像路径
    img.src="./image/my_2.png";
    //绘制图像
    content.drawImage(img,0,0,200,200,100,100,200,200);
    
  //例5：绘制文字
  //空心文字：
  //填充线条颜色
    content.strokeStyle="yellow";
    //绘制文字 文字大小和字体
    content.font="50px yahei";
    //文字内容和坐标x,y，宽度
    content.strokeText("Hello World !",400,200,500);
  //实心文字：
    content.strokeStyle="yellow";
    content.font="50px yahei";
   content.fillStyle="blue";
    content.fillText("Hello World !",800,200,500);
</script>
</body>

//例6：canvas绘制动画
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
            background-color: black;
            overflow: hidden;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    var animate={
        screenW:document.documentElement.clientWidth,    //获取浏览器可视区域
        screenH:document.documentElement.clientHeight,
        content2d:null,
        x:null,
        y:null,
        r:5,
        hz:0,
        arc:[],
        //随机坐标
        randomloc: function () {
            var x=Math.floor(Math.random()*this.screenW);    //向下取整
            var y=Math.floor(Math.random()*this.screenH);
            return [x,y];
        },
        //随机颜色
        randomcolor: function () {
            return "#"+parseInt(Math.random()*16777216).toString(16);   //转16进制
        },
        //获取cavas设置属性
        init: function () {
            var canvas=document.getElementById("canvas");    //获取canvas
            canvas.width=this.screenW;
            canvas.height=this.screenH;
            this.content2d=canvas.getContext("2d");   //转2d
        },
        //绘制canvas
        draw: function () {
            this.x=this.randomloc()[0];
            this.y=this.randomloc()[1];   //获取随机坐标
            this.content2d.beginPath();   //开始绘制
            var color=this.randomcolor();   //获取随机颜色
            this.content2d.strokeStyle=color;    //设置颜色为随机颜色
            this.content2d.arc(this.x,this.y,this.r,0,Math.PI*2);    //绘制圆形 圆心坐标 半径 起始角度 终止角度
            this.stroke;    //填充
            this.content2d.closePath();
            this.arc.push([this.x,this.y,this.r,color,0])  //绘制的存在数组中 储存 坐标颜色半径运动次数
        },
        update: function () {
          for(var i=0;i<this.arc.length;i++){
              this.content2d.clearRect(this.arc[i][0]-this.arc[i][2]-1,this.arc[i][1]-this.arc[i][2]-1,this.arc[i][2]*2.2,this.arc[i][2]*2.2);  //清除画板上的圈 清除的是矩形 起始坐标 矩形的宽高
              this.content2d.beginPath();  //开始绘制
              var color=this.arc[i][3];
              this.content2d.strokeStyle=color;
              this.arc[i][2]++;     //半径增加
              if(this.arc[i][2]>=10){     //半径增加到10变回5 运动次数加1
                  this.arc[i][2]=5;
                  this.arc[i][4]++;
                  if(this.arc[i][4]>=5){     //运动次数到5次 清除数组中这个圈 索引统一减1
                      this.arc.splice(i,1);
                      i--;
                      continue;
                  }
              }
              this.content2d.arc(this.arc[i][0],this.arc[i][1],this.arc[i][2],0,Math.PI*2);//绘制圆形 坐标为数组存储的值
              this.content2d.stroke();
              this.content2d.closePath();   //结束绘制

          }
        }
    };
    animate.init();
    window.requestAin= (function () {
                return window.requestAnimationFrame||
                        mozRequestAnimationFrame||
                        webkitRequestAnimationFrame||
                        msRequestAnimationFrame||
                        function (callback) {
                            setTimeout(callback,1000/60)
                        }
            }
    )();
    (function loop() {     //自执行函数
        window.requestAin(loop);     //调用计时器 执行本自执行函数
        animate.hz++;       //控制速度
        if(animate.hz>3){
            animate.hz=0;
            animate.draw();
            animate.update();
        }
    })();
</script>

</body>
</html>

喵叻个汪

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 Canvas

什么是canvas&lt; canvas &gt; 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。使用canvas如何绘图创建canvas画布获取canvas画布动态操作canvas画布将canvas画布转为2d模式使用Javascript提供的API绘制图像示例代码：&lt;body&gt;//创建canvas画布&lt;canvas id="ca...
复制链接

扫一扫