正文

html5css3学习总结canvas绘图

魏明理  2022-02-07  206

关键词：

canvas HTML5 重中之重

canvas是HTML5中的重点；今天简单的学习了一下，总结一下canvas的概念；canvas是要有面向对象的思维；各个标签就像我们画水彩画一样，需要注意标签使用的顺序
canvas就是一个画布；可以画线，图形，填充等。操作图片和文本。操作方式是使用js；可以提供2d图形，3d图形绘制；

canvas使用：
①<canvas id='myCanvas' width='500' height='500'></canvas>
需要有一个ID ，画布的尺寸；
②通过ID获取canvas的Dom对象，获取context；
var canvasDom=document.getElementById('canvas')
var context=canvasDom.getContext('2d')
操作context两种默认方式：1，绘制线（stroke）2，填充（fill）；
moveTO(x,y)移动x,y
lineTo(x,y)连线至x ，y
stroke();描边；
lineWidth：绘制出的线粗细；
fillRect(x,y,width,height)填充矩形；
clearRect(x,y,width,height)清除画布区域；清除重复绘制的现象
beginPath-->开辟新路径；
closePath--->闭合路径；
stroke()--->描边；
fill();--->>填充；
lineWidth---》线宽；
lineJoin----->连接点样式；
lineCap------>线头样式；
strokeStyle--->描边颜色；
fillStyle------->填充颜色；

绘制直线

<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
    var oCanvas=document.querySelector('canvas')
    var ctx=myCanvas.getContext('2d')
    ctx.moveTo(x,y)//x,y坐标
        ctx.lineTo(x,y)//绘制到x,y这个位置
        ctx.lineWidth='10'//绘制线宽10px;
        ctx.strokeStyle='red'//绘制线颜色
        ctx.fillStyle='blue'//填充颜色
        ctx.stroke（）//描边
        ctx.fill()//
</script>
</body>

绘制矩形

<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
    var oCanvas=document.querySelector('canvas')
    var ctx=myCanvas.getContext('2d')
    ctx.strokeStyle='red';
    ctx.strokeRect(10,10,190,100)//绘制矩形接收4个参数。x,y，width，height
    ctx.fillStyle='blue'
    ctx.fillRect(110,110,100,100)
</script>

绘制圆

<canvas id="mycanvas" width="500" height="500"></canvas>
<script>
    var oCanvas=document.querySelector('#mycanvas')
    var ctx=oCanvas.getContext('2d')
    ctx.beginPath();//开新路径
    //绘制圆接收参数圆心X坐标，圆心y坐标，半径，开始角度 结束角度 是否逆时针；
    ctx.arc(250,250,100,0,Math.PI*2,true)
    ctx.fillStyle='red'
    ctx.fill();
    
    ctx.closePath();//闭合路径
    //左眼
    ctx.beginPath();
    ctx.arc(200,230,10,0,Math.PI*2,true)
    ctx.fillStyle='black'
    ctx.fill();
    ctx.closePath();
    //右眼
    ctx.beginPath();
    ctx.arc(300,230,10,0,Math.PI*2,true)
    ctx.fillStyle='black'
    ctx.fill();
    ctx.closePath();
    //嘴
    ctx.beginPath();
    ctx.arc(250,270,50,0,Math.PI,false)
    ctx.fillStyle='yellow'
    ctx.fill();
    
    ctx.closePath();
</script>

效果图

<body>
    <canvas width="600" height="300"></canvas>
    <script>
        var oCanvas = document.querySelector('canvas');
        var ctx = oCanvas.getContext('2d');
        ctx.fillStyle = 'rgba(12,32,212,0.4)'
             //添加数据
        var data = [
            rnd(100,1000),rnd(100,1000),rnd(100,1000),rnd(100,1000),rnd(100,1000)
        ];

        var max = Math.max.apply(null,data);
               //循环数据
        data.forEach(function(number,index){
            var {
                height,
                width
            } = oCanvas;

            var h = number/max*height
            var w = index*width/data.length

            ctx.fillRect(w,height-h,60,h);
        })


        function rnd(n,m){
            return parseInt(Math.random()*(m-n)+n)
        }

    </script>
</body>

自己试了一个小方法下载自己绘制的图片

//在body里添加一个点击按钮，在点击的时候创建一个a标签，并更改a标签的href属性，使用canvas上的toDataURL方法;
var oBtn=document.querySelector('button');
    oBtn.onclick=function(){
        var oA=document.createElement('a')
        oA.href=oCanvas.toDataURL();
        oA.download='数据图.png'
        oA.click();    
    }

就总结到这里吧，自己后来又写了一个小例子巩固一下所学的知识；贴上代码欢迎大家指正，毕竟我还是那么low。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
    body{
         background:#000;
        }
    canvas{background:#FFF;}
</style>
</head>

<body>
<canvas id="mycanvas" width="1300" height="800"></canvas>
<script>
    var oCanvas=document.querySelector('#mycanvas')
    var ctx=oCanvas.getContext('2d')
    var speed=4
    var angle=0
    var n=0
    setInterval(function(){
        ctx.clearRect(0,0,oCanvas.width,oCanvas.height)
        ctx.beginPath();
        ctx.moveTo(n,250)
        ctx.arc(n,250,20,d2r(angle),d2r(360-angle),false)
        n++;
        ctx.fillStyle='pink'
        ctx.closePath();
        ctx.stroke();
        ctx.fill();
        angle+=speed
        if(angle > 45 || angle<0 ){
            speed*=-1    
        }
    
    },16)
    
    //度数转换为弧度
    function d2r(degree){
        return degree/180*Math.PI;    
    }
</script>
</body>
</html>

这是一个贪吃豆的头像，只做到了嘴闭合后面自己在把游戏效果写出来；

这个是一个稍微复杂的屏保问题，电脑原因没办法删除gif图片，有兴趣的朋友可以复制代码在电脑上查看效果，里面注释已经白话的low死；希望不要嘲笑；

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
        body{
            background-color: #182327;
            margin: 0;
        }
    </style>
</head>

<body>
    <canvas width="1300" height="800"></canvas>
    <script>
        var oCanvas=document.querySelector('canvas')
        var ctx=oCanvas.getContext('2d')
        var amount=200;//创建点的个数
        var arr=[];//定义一个数组存每个点移动的数据；
        
        var range=100;
        var first=true;
        //循环创建移动的点
        for( var i=0;i<amount;i++){
            arr.push({
                x:rnd(0,oCanvas.width),
                y:rnd(0,oCanvas.height),
                speedX:rndSign()*rnd(1,3)*0.5,
                speedY:rndSign()*rnd(1,3)*0.5,
                r:rnd(1,4)                    
            })    
        }
        setInterval(function(){
            //先清除画布区域；解决重复绘制的问题
            ctx.clearRect(0,0,oCanvas.width,oCanvas.height);
            arr.forEach(function(dot,index){
                //开始绘制图形
                ctx.beginPath();
                ctx.fillStyle='rgb(141,134,32)';
                var {
                    x,
                    y,
                    r,
                    speedX,
                    speedY    
                }=dot;    
                ctx.arc(x,y,r,0,2*Math.PI,false);
                ctx.fill();
                dot.x+=speedX;
                dot.y+=speedY;
                //限定点移动的范围
                if(dot.x<0||dot.x>oCanvas.width-r){
                    dot.speedX*=-1    
                }
                
                if(dot.y<0||dot.y>oCanvas.height-r){
                    dot.speedY*=-1    
                }
            })    
    //
    arr.forEach(function(dot,index){
        for(let i=index;i<arr.length;i++){
            //求出两点之间距离，用于判断是否连线
            var distance = Math.sqrt(
            Math.pow(dot.x - arr[i].x,2)+
            Math.pow(dot.y - arr[i].y,2)
        )    
        
        //判断什么时候连线
            if(distance<range){
                ctx.beginPath();
                ctx.moveTo(dot.x,dot.y);
                ctx.lineTo(arr[i].x,arr[i].y);
                ctx.strokeStyle=`rgba(141,134,32,${1-distance/range})`;
                ctx.stroke();    
            }
        }    
    });
        },16);
        //当鼠标移动上去点跟着走
        document.onmousemove=function({clientX,clientY}){      
            //判断第一次移上去
            if(first){
                first=false;
                arr.push({
                    x:clientX,
                    y:clientY,
                    speedX:0,
                    speedY:0,
                    r:1    
                })    
            }else{
                arr[0].x=clientX;
                arr[0].y=clientY;    
            }
        }
        //随机函数
        function rnd(n,m){
            return parseInt(Math.random()*(m-n)+n)
        }
        //解决点移动方向函数
        function rndSign(){
            return Math.random() > 0.5 ? 1 : -1;
        }
    </script>
</body>
</html>

html5css3学习总结

html多媒体 video与audio两个多媒体标签基本上使用方法一样，没有什么太大的区别。 <videosrc="statics/.mp4" muted 静音 autopla 查看详情

html5学习笔记——canvas绘图webglsvg

一、Canvascanvas是HTML5中新增一个HTML5标签与操作canvas的javascriptAPI，它可以实现在网页中完成动态的2D与3D图像技术。<canvas>标记和SVG以及VML之间的一个重要的不同是，<canvas>有一个基于JavaScript的绘图API，而SVG和VML使用一个X... 查看详情

html5canvas常用api总结--绘图api

...呈现出千变万化的效果，还可以制作网页游戏，接下来就总结一下和绘图有关的API。绘画的时候canvas相当于画布，而context相当于画笔。1.绘制线条moveTo(x0,y0)：把当前画笔（ictx）移动到（x0,y0）这个位置。lineTo(x1,y1):从当前位置(x0... 查看详情

菜鸟求助关于canvas绘图背景问题。

最近在学习关于利用Canvas类来实现简单的绘画功能，但是网上学习看到的都是用canvas.drawColor来设置背景为单一的颜色。想请教如何实现利用本地图片作为背景然后进行绘画，谢谢！参考技术Adrawable里，名为123.jpg//声明一张背景... 查看详情

html5canvas学习之路

二：Canvas的绘图（上）1.概述Canvas具有强大的绘图功能，可以通过Javascript控制其上下文对象进行绘图。2.基本矩形在Canvas上，绘制基本矩形有三种方式：填充、描边、清楚。三种API如下：fillRect(x,y,width,height);在位置（x,y）处以宽w... 查看详情

html学习笔记(canvas基础)

1.什么是Canvascanvas就是一个画布，可以进行画任何的线，图形，填充等一系列操作。这一切都是用Js操作的，另外Canvas不仅仅提供简单的二维矢量绘图，也提供了三维的绘图，以及图片处理等一系列的api支持。创建canvas标签<!--... 查看详情

html5canvas核心技术图形动画与游戏开发学习总结

save和restore函数的应用保存canvas和恢复canvas clip函数的应用文字的绘制背景图片的绘制离屏canvas 基于时间的运动查看详情

html5绘图总结详解

HTML5的绘图基础?在HTML5以前的时代，web前端开发者无法在HTML页面上动态地绘制图片?HTM5新增了一个<canvas../>元素，相当于一个画布，可以获得一个CanvasRenderingContext2D对象?CanvasRenderingContext2D提供了很多画图APIHTML5的画图主要是... 查看详情

利用canvas绘制图形

...可以借助flash实现，也可以使用SVG和VML来绘图。本章将要学习一种新的绘图方法——使用Canvas元素，它是基于HTML5原生的绘图功能。使用Canvas元素，可以绘制图形，也可以实现动画。它方便了使用Javascript脚本的前端开发人员，寥... 查看详情

第五周学习总结-html5(代码片段)

2018年8月12日　　暑假第五周，我把HTML剩余的一些标签和用法看完了并学了一些HTML5的标签及用法。　　HTML5比HTML多了一些元素，也删去了一些元素。HTML5新增元素图形元素<canvas>定义图形，比如图表和其他图像。该标签基于J... 查看详情

canvas画板基础应用的学习

canvas是html5中的绘图容器，我们可以通过javascript的控制来进行图形的绘制，绘制对象可以是路径、盒、圆、字符等，同时，你也可以通过js给画布添加图像，下面来介绍canvas的各种基本的用法：1、首先，我们需要在html标签中创... 查看详情

图形基础篇02#指令式绘图系统：如何用canvas绘制层次关系图？(代码片段)

说明【跟月影学可视化】学习笔记。如何用Canvas绘制几何图形？1.Canvas元素和2D上下文Canvas元素上的width和height属性不等同于Canvas元素的CSS样式的属性。这样分开能更方便地适配不同的显示设备。CSS属性中的宽高影响Canvas在页... 查看详情

python基础|还不会python绘图？两万字博文教你matplotlib库（超详细总结）

⭐本专栏旨在对Python的基础语法进行详解，精炼地总结语法中的重点，详解难点，面向零基础及入门的学习者，通过专栏的学习可以熟练掌握python编程，同时为后续的数据分析，机器学习及深度学习的代码能力打下坚实的基础。查看详情

绘图学习

最近对绘图进行了简单的学习，发现绘图的功能真是异常强大，基本可以自定义任何图形。下面对我学习的代码进行总结。刚开始以为可以将代码直接写到控制器中，后来发现图形并不显示，后来发现必须重写视... 查看详情

html5canvas学习之路

三：Canvas的绘图（下）1.在画布上的合成合成是指如何精细控制画布上对象的透明度和分层效果。有两个属性可以控制合成操作：globalAlphaglobalAlphaCanvas属性用来表示透明度，它的默认值为1.0（完全不透明），并且可以设置从0.0到... 查看详情

canvas绘图

1、概念canvas一般就是用来绘制图像的2、基本知识上下文对象 varcanvas=doucment.getElementById("canvas"); varctx=canvas.getContext("2d"); ctx.fillStyle="color";//填充样式查看详情

canvas绘图

要在这块布上绘图，需要取得绘图上下文，而取得绘图上下文对象的引用，需要调用getContext()方法并传入上下文的名字，传入“2d”,就可以取得2d上下文对象用toDataURI方法可以导出canvas元素绘制的图像 f... 查看详情

androiduicanvas画布⑤(canvas坐标系|canvas绘图坐标系变换示例)

文章目录一、Canvas绘图坐标系变换示例Canvas状态保存机制中,存在两个栈结构,分别是状态栈和图层栈;其中图层栈又称为Layer栈;Canvas画布中,有222套坐标系,分别是:Canvas自身坐标系Canvas绘图坐标系一、Canvas绘图坐标系变换示例Canvas绘... 查看详情