小白入门---HTML5标签canvas

最新推荐文章于 2024-03-17 16:21:04 发布
最新推荐文章于 2024-03-17 16:21:04 发布
阅读量809 收藏 3
点赞数 2
分类专栏： WEB前端HTML5 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Miss_wangdapao/article/details/77199536
版权

HTML5标签canvas

1、canvas简介

1、canvas:
* >做游戏：白鹭引擎、trees…;
* >做动画；做动态图表，频谱；画图…
* HTML5不是单纯的html
* canvas本身是一个标签,是一个空白的画布，默认是300*150的宽高
* 本身有宽高的属性，不需要使用CSS去设置，如果非要设置，一定要和canvas的宽高设置相同，不然绘制出来的内容就是变形的
* 如果希望画布上有内容，需要通过JS来绘制->是通过画布的上下文(相当于舞台，舞台上面可以有各种移动，展示出来)进行绘制的

2、使用步骤：
* >1.创建一个空白画布
* >2.获得画布的上下文
* >3.绘制准备：设置要绘制的一些样式和内容(画笔的宽，颜色，所需的资源)
* >4.开始绘制

3、HTMLCanvasElement的2个属性:
* >width:宽；
* >height:高
* >lineWidth：设置笔画宽度

4、HTMLCanvasElement的方法：
* >getContext(inDOMString contextId)，可以传2d或者experimental-webgl(图形图像处理)
* >toDataURL():把canvas对象转成url->生成带有绘制内容的一个资源链接地址
* >moveTo(x,y):抬起笔来要落到哪一个位置
* >lineTo(x,y):画线到某个点
* >stroke(不传||path)：把画的内容绘制出来:path是2d类型的
* >beginPath():标识，要开始一个路径
* >closePath():标识，要闭合一个路径
* >clearRect():是 Canvas 2D API 设置指定矩形区域内（以 点 (x, y) 为起点，范围是(width, height) ）所有像素变成透明，并擦除之前绘制的所有内容的方法。
* >canvas:获得画布的DOM元素；
* >lineCap：设置画笔结束位置的形状(butt:方形，round：圆形，square：线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。)
* >CanvasRenderingContext2D.createLinearGradient()Canvas 2D API 的方法沿着由参数表示的坐标给出的线创建一个梯度。
* >CanvasRenderingContext2D.createRadialGradient()Canvas 2D API 的方法创建由参数表示的两个圆的坐标给出的径向渐变。此方法返回a CanvasGradient。
* >CanvasRenderingContext2D.arc（x<原点x坐标>，y<原点y坐标>，radius<半径>，startAngle<起始角度>，endAngle<结束角度>，anticlockwise<是否逆时针>）:其在中心的路径（X，Y）与半径位置[R开始于由startAngle和在结束endAngle通过在给定的方向上行进逆时针（默认顺时针）。
* >CanvasRenderingContext2D.createLinearGradient()//创建一个渐变对象
* >CanvasRenderingContext2D.strokeText(text，x，y [，maxWidth]);Canvas 2D API 的方法在给定的(x，y)位置上触发给定的文本。如果提供了最大宽度的可选第四个参数，文本将被缩放以适应该宽度。
* >Scale(x,y):放大缩小，不会影响到画布本身，所放的是画布里面的内容(让画布里面的单位进行缩放)
* >Save():保存画布上面之前的样式，即在写save之前的样式，包括(笔画宽度，颜色，变形)
* >Restore()：还原的是上一次保存的状态，多次retore也是返回上次保存的内容[1]->1.[1,2]->2,1
* >Translate():平移，以画布的原点为参考。也相当于重新设置原点。
* >Rotate(anglePI/180*角度):旋转，旋转中心点一直是 canvas 的起始点。并没有旋转canvas，旋转的是后续绘制在canvas上的图形。 如果想改变中心点，我们可以通过 translate() 方法移动 canvas 。

5、 CanvasGradient :设置canvas里免颜色渐变的类，可以通过设置颜色的方式(fillStyl/strokeStyle)去设置渐变对象
* 方法：
* >addColorStop(offset(0-1),color):这个方法可以多次调用添加渐变的颜色值

6、canvas里面的动画：
* >1.通过不断刷新canvas里面的内容，实现动画
* >2.清除上一次canvas里面的内容

2、基本方法使用方法

(function(){
    var rectX=0;
    var rectY=0;
    var timer;
    function init(){
        //dom操作  HTMLElement
        //canvas：HTMLCanvasElement
        var canvasEle=document.querySelector("#box");
        canvasEle.width=innerWidth;
        canvasEle.height=innerHeight;   
        /*获得画布的上下文 
         * 返回一个 CanvasRenderingContext2D对象：提供了绘制，设置绘制内容的方法属性
         * >fillStyle：设置填充的样式(充满)
         * >storkeStyle：设置绘制内容轮廓的样式
         * >fillRect(x,y,w,h):绘制矩形的方法,以填充的方式绘制,原点是画布的左上角
         */
        var context=canvasEle.getContext("2d"); 
        //设置要绘制的参数
//      context.fillStyle="red";
        //设置绘制内容轮廓的样式
//      context.strokeStyle="yellow";
        //距离原点左上角100,边长为50，50()的画布
        //context.fillRect(100,100,50,50);
        context.lineWidth=2;
        /*context.moveTo(200,100);
        context.lineTo(400,100);
        context.moveTo(400,100);
        context.lineTo(400,200);
        context.moveTo(400,200);
        context.lineTo(200,200);
        context.moveTo(200,200);
        context.lineTo(200,100);
        context.stroke();*/
        rectX=50;
        rectY=30;
        drawRect({
            context:context,
            strokeColor:"white",
            fillColor:"orange",
            x:50,
            y:30,
            width:100,
            height:100  
        });
        /*setTimeout(function(){
            context.clearRect(0,0,innerWidth,innerHeight);
        },3000);
        rectControl(context);*/
    }
    //封装一个画矩形的方法
    function drawRect(info){
        if(!info){
            console.log("必须传参数");
            return;
        }
        info.context.strokeStyle=info.strokeColor;
        info.context.fillStyle=info.fillColor;
        info.context.beginPath();//是 Canvas 2D API 通过清空子路径列表开始一个新路径的方法。 当你想创建一个新的路径时，调用此方法。
        info.context.moveTo(info.x,info.y);
        info.context.lineTo(info.x+info.width,info.y);
        info.context.lineTo(info.x+info.width,info.y+info.height);
        info.context.lineTo(info.x,info.y+info.height);
//      info.context.lineTo(info.x,info.y);
        info.context.closePath();//是 Canvas 2D API 将笔点返回到当前子路径起始点的方法
        info.context.fill();//是 Canvas 2D API 根据当前的填充样式，填充当前或已存在的路径的方法
        info.context.stroke();       
    }   
    function rectControl(context){
        document.onkeydown=function(event){//当按下wasd的时候执行不同的动画
            var dis="";
//          console.log(event);
            switch(event.keyCode){
                case 87:
                    dis="top";
                    break;
                case 65:
                    dis="left";
                    break;
                case 83:
                    dis="bottom";
                    break;
                case 68:
                    dis="right";
                    break;
                default:
                    break;
            }
            move(context,dis);
        };
        document.onkeyup=function(){
            clearInterval(timer);
            timer=null;
        }
    }   
    function move(context,direction){
        context.clearRect(1,1,innerWidth,innerHeight);//清除上一帧
        var distance=5;
        switch(direction){
            case "left":
                rectX-=distance;
                break;
            case "right":
                rectX+=distance;
                break;
            case "top":         
                rectY-=distance;
                console.log(rectY)
                break;
            case "bottom":
                rectY+=distance;
                break;
        }       
        drawRect({
            context:context,
            strokeColor:"white",
            fillColor:"orange",
            x:rectX,
            y:rectY,
            width:100,
            height:100              
        });  
        if(timer){return}//自己调用自己，如果有timer，就不要去创建，如果不写，每次都创建，定时器效果会叠加
        timer=setInterval(function(){
            move(context,direction);
        },30)
    }
    init();
 })();

(function(){
    function init(){
        /*var canvasEle=document.querySelector("#box");
        canvasEle.width=innerWidth;
        canvasEle.height=innerHeight;
        window.onresize=function(){
            cavnasEle.width=innerWidth;
            canvasEle.height=innerHeight;
        };
        var context=canvasEle.getContext("2d");
        var linearGradient=context.createLinearGradient(0,0,innerWidth,innerHeight);//创建线性渐变的方法->CanvasGradient类型的对象
        linearGradient.addColorStop(0,"blue");
        linearGradient.addColorStop(0.5,"white");
        linearGradient.addColorStop(1,"green");
        context.fillStyle=linearGradient;//添加颜色渐变
        context.strokeStyle=linearGradient;
        context.font="40px 华文楷体";
        context.strokeText("你好",100,100);
        context.fillText("你好",200,200);
//      context.fillRect(0,0,innerWidth,innerHeight);*/
    }
    init();
})();
(function(){
    var context=document.getElementById("container").getContext("2d");
    function scale(){
        context.save();//保存上一次canvas里面的状态
        context.scale(0.5,1);//先放大缩小才行，放大缩小的是画布里面的内容的像素点，画布本身没有变化
        context.fillStyle="red";
        context.fillRect(100,100,100,100);
        context.restore();//还原上次保存的状态
        context.save();
        context.fillStyle="yellow";
        context.fillRect(100,100,50,50)
        context.restore();
        context.fillRect(0,0,50,50)
    }
    function test(){
        context.save();
        context.strokeStyle="green";
        context.lineWidth=5;
        context.moveTo(0,0);
        context.lineTo(300,50);
        context.stroke();
        context.restore();
        context.moveTo(0,100);
        context.lineTo(300,100);
        context.stroke();
}
    function move(){
        context.save();
        context.translate(200,-100);//沿着x向右移动200px，沿着y向上一定100px，移动的时候是以原点为中心去移动的
        context.fillRect(300,300,100,100);
        context.restore();
        context.fillStyle="yellow";
        context.fillRect(300,300,50,50);
    }
    function rotation(){    
        context.rotate(2*Math.PI/360*45);//旋转45度
        context.fillText("nhao",300,300)
        context.fillRect(300,300,50,50);
    }
    function init(){
        scale();
        test();
        move();
        rotation();
    }
    init();
})();

3、canvas具体实例

1.自制画板
》HTML部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>painter</title>
        <style type="text/css">
            *{margin: 0;padding: 0;}        
            html{overflow: hidden;}
            #box{background-color: #242424;}
            .toolMenu{position: absolute;}
            .openButton{width: 50px;height: 50px;background-color: #ff3c1a;border-radius: 50%;}
            .tool{background-color: yellow;}
            .tool li{margin-top: 5px;}
            a{text-decoration: none;background-color: #bebebe;width: 60px;text-align: center;display: block;}
        </style>
    </head>
    <body>
        <div class="toolMenu">
            <div class="openButton"></div>
            <ul class="tool">
                <li>宽度<input type="range"/></li>
                <li>颜色<input type="color"/></li>
                <li><a class="download" download="photo">下载</a></li>
                <li><a class="clear" herf="#">清屏</a></li>
                <li><a class="eraser" herf="#">橡皮擦</a></li>
            </ul>
        </div>
        <canvas id="box"></canvas>


    <script src="js/painter.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/main.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

》painter.js：面向对象写法

(function(){
    function Painter(id){
        var canvasEle=document.getElementById(id);
        canvasEle.width=innerWidth;
        canvasEle.height=innerHeight;
        this.context=canvasEle.getContext("2d");
//      this.context.strokeStyle="white";
        this.drawLine();
        this.bgcolor=document.defaultView.getComputedStyle(canvasEle, null).backgroundColor;
    }
    Painter.prototype.drawLine=function(){
        var self=this;
        self.context.canvas.addEventListener("mousedown",startAction);
        self.context.canvas.addEventListener("mouseup",endAction);
        function startAction(event){
            if(!self.isClear){//如果没有使用橡皮擦就是划线的功能
                self.context.beginPath();
                self.context.moveTo(event.pageX,event.pageY);
                self.context.stroke();
            }       
            self.context.canvas.addEventListener("mousemove",moveAction);
        }
        function endAction(){
            self.isClear=false;//不再使用橡皮擦的功能
            self.context.canvas.removeEventListener("mousemove",moveAction);
        }
        function moveAction(event){
            if(self.isClear){//移动的时候清除，-8的原因是要让他移动到中间
                self.context.clearRect(event.pageX-8,event.pageY-8,16,16);
                return;
            }
            self.context.lineTo(event.pageX,event.pageY);
            self.context.stroke();
        }
    }
    Painter.prototype.setLineWidth=function(width){
        this.context.lineWidth=width;
    }
    Painter.prototype.isRoundLineCap=function(isRound){
        this.context.lineCap=isRound?"round":"butt";
    }
    Painter.prototype.setLineColor=function(color){
        this.context.strokeStyle=color;
    }
    Painter.prototype.save=function(){
        return this.context.canvas.toDataURL();//吧绘制的内容保存成一个图片地址
    }
    Painter.prototype.clear=function(){
        this.context.clearRect(0,0,innerWidth,innerHeight);
    }
/*  Painter.prototype.eraser=function(){
        this.setLineColor(this.bgcolor);
        this.drawLine();        
    }*/
    Painter.prototype.rubber=function(){
        this.isClear=true;      
    }
    window.Painter=Painter;
})();

》main.js调用过程：

(function(){
    function init(){
        var painter=new Painter("box");
        painter.setLineWidth(5);
        painter.isRoundLineCap(true);
        painter.setLineColor("red");
        var toolView=document.querySelector(".tool")
        document.querySelector(".openButton").onclick=function(){           toolView.style.display=toolView.style.display==="block"?"none":"block";
        };      document.querySelector("input[type=range]").value=painter.context.lineWidth*2;
        document.querySelector("input[type=range]").onchange=function(){
            painter.setLineWidth(this.value/4);
        };      document.querySelector("input[type=color]").value=painter.context.strokeStyle;
        document.querySelector("input[type=color]").onchange=function(){
            painter.setLineColor(this.value);
        };
        var download=document.querySelector(".download");
        download.onclick=function(){
            download.setAttribute("href",painter.save());
        };
        document.querySelector(".clear").onclick=function(){
            painter.clear();
        };
        var eraser=document.querySelector(".eraser");
        /*eraser.onclick=function(){    
            eraser.innerHTML=eraser.innerHTML==="橡皮擦"?"停止":"橡皮擦";
            if(eraser.innerHTML=="停止"){ document.body.style.cursor="url(img/eraser.png),pointer"; painter.eraser(); }else{ document.body.style.cursor=""; painter.setLineColor(document.querySelector("input[type=color]").value) painter.drawLine() }           
        };*/
        eraser.onclick=function(){
            painter.rubber();
        }
    }
    init();
})();

2、制作动态柱状图
》使用面向对象直接创建表格

(function(){
    /*1.封装表格的背景
     *2.绘制带文字小方块
     * datas是传过来的需要可视化的数据
     */
    function Table(superEle,datas){
        this.canvasContext=document.createElement("canvas").getContext("2d");//创建canvas对象
        superEle.appendChild(this.canvasContext.canvas);//添加到父元素中
        this.width=this.canvasContext.canvas.width=innerWidth;//设置宽
        this.height=this.canvasContext.canvas.height=innerHeight;//设置高
        this.datas=datas||[];
        this.background();
        this.addRect();
    }
    Table.prototype.background=function(){
        this.canvasContext.beginPath();
        this.canvasContext.strokeStyle="black";
        var space=10;
        this.canvasContext.strokeRect(space,space,this.width-space*2,this.height-space*2);//绘制矩形，边距留白
        var lineHeight=(this.height-space*2)/10;
        for(var i=1;i<10;i++){//绘制背景的9根线
            this.canvasContext.moveTo(space,space+lineHeight*i);
            this.canvasContext.lineTo(this.width-space,space+lineHeight*i);
            this.canvasContext.stroke();
        }
    }
    Table.prototype.addRect=function(){
        var gradient=this.canvasContext.createLinearGradient(0,0,0,this.height);
        gradient.addColorStop(0,"red");
        gradient.addColorStop(1,"green");
        this.canvasContext.fillStyle=gradient;
        //宽度间距
        var rectWidth=this.width-10*2;//总宽度
        var rectHeight=this.height-10*2;//总高度
        var space=rectWidth/this.datas.length/5;
        var width=(rectWidth-space*(this.datas.length+1))/this.datas.length;
        var max=1000;
        var heightScale=rectHeight/max;//计算比例
        for (var i=0;i<this.datas.length;i++) {
            var height=this.datas[i]*heightScale;
            var y=this.height-10-height;//总宽度-边距-小方块宽度
            this.canvasContext.fillRect(space+(space+width)*i+10,y,width,height);
        }
    }
    Table.prototype.setDatas=function(datas){
        this.datas=datas;
        this.canvasContext.clearRect(0,0,innerWidth,innerHeight);//清除上一次的内容然后再新建
        this.background();
        this.addRect();
    }
    window.Table=Table;
})();

》调用创建的表格

var table=new Table(document.body,[33,200,500,90,100,800,770,1000,560]);        
        setInterval(function(){
            var datas=[];
            for (var i=0;i<10;i++) {
                datas.push(Math.random()*1000);//随机创建数组
            }
            table.setDatas(datas);//将新的数据传入到table中
        },1000*Math.random()*4);

3、绘制太极图和调试贝塞尔曲线
》HTML部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            html{overflow: hidden;}
            *{margin: 0;padding: 0;}
            #box{background-color: #242424;}
            div{
                width: 20px;
                height: 20px;
                background-color: white;
                border-radius: 50%; 
                position: absolute;
                left: 100px;
                top: 200px;
                text-align: center;
                line-height: 20px;
            }
        </style>
    </head>
    <body>
        <canvas id="box"></canvas>
        <div class="startPoint">b</div>
        <div class="endPoint">e</div>
        <div class="Point1">1</div>
        <div class="Point2">2</div>

        <script src="js/circle.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

》具体的js代码：

(function(){
    var curEle=null;
    var startPoint=document.querySelector(".startPoint");
    var endPoint=document.querySelector(".endPoint");
    var Point1=document.querySelector(".Point1");
    var Point2=document.querySelector(".Point2");
    var context=null;
    function init(){
        var canvasEle=document.querySelector("#box");
        canvasEle.width=innerWidth;
        canvasEle.height=innerHeight;
        window.onresize=function(){
            canvasEle.width=innerWidth;
            canvasEle.height=innerHeight;
        };
        context=canvasEle.getContext("2d");
        context.strokeStyle="white";
        context.lineWidth=10;
        //x,y,radius,startAngle,endAngle,anticlockwise(默认逆时针)
        /*context.beginPath();
        context.arc(500,300,200,0,Math.PI*2,true);
        context.stroke();
        context.beginPath();
        context.arc(600,300,100,0,Math.PI,true);
        context.stroke();
        context.beginPath();
        context.arc(400,300,100,0,Math.PI,false);
        context.stroke();
        context.beginPath();
        context.moveTo(300,300);
        context.bezierCurveTo(500,400,200,400,600,600);
        context.stroke();*/     
        for(var i=0;i<4;i++){//循环给每个元素添加事件
            addEvent([startPoint,endPoint,Point1,Point2][i]);
        }
        document.ondblclick=function(){ document.removeEventListener("mousemove",move) }; 
    }
    function addEvent(ele){ ele.onmousedown=function(){ curEle=this; document.addEventListener("mousemove",move) }; }
    function move(event){ curEle.style.left=event.pageX+"px"; curEle.style.top=event.pageY+"px"; context.clearRect(0,0,innerWidth,innerWidth); context.beginPath(); context.moveTo(getLeft(startPoint),getTop(startPoint)); context.bezierCurveTo(getLeft(Point1),getTop(Point1),getLeft(Point2),getTop(Point2),getLeft(endPoint),getTop(endPoint)); context.stroke();  }
    function getLeft(ele){ return parseInt(ele.style.left) }
    function getTop(ele){ return parseInt(ele.style.top) }   
    init();
})();
Richer_wangx
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML5-Canvas标签使用实例一
Step Day | 每天进步一小步，人生进步一大步
06-12 3466
最近居然也痴迷起了HTML5来，虽然在目前的项目中很少用到HTML5（原因是我们得考虑客户使用的是IE6、7、8的浏览器兼容性问题）。这里所写纯粹是个人兴趣。          一、什么是Canvas标签？Canvas标签有什么用途？                   这里过多的概念性解释我就不多写了的，大家完全可以百度、Google一下即可清楚更多。Canvas就是HTML5内新增的一
html5之canvas（二）
marslover521的博客
12-26 192
canvas 之画弧 canvas是基于状态：状态就是变量不同时期的值。 ctx=cvs.getContext(‘2d’); 其中ctx中有一个属性：ctx.canvas.height… canvas就是获取到的画布 HTMLCanvasElement.toDataURL() canvas.toDataURL(type, encoderOptions); type 可选 图片格式，默认为 ...
使用vue3 + h5 canvas 绘制2d图片和文字
最新发布
Seveny07的博客
03-17 2131
在html中添加画布,js通过ref获取画布实例，获取context进行绘制。canvas必须要指定width和height属性。js通过ref获取实例，ref()是typescript的写法，规定传入的是HTMLCanvasElement，方便之后调用此接口的属性和方法。使用nextTick防止还有html元素没加载完。getContext(‘2d’)获取context，用fillRect填充一个矩形，先提前指定填充样式为黑色。
让我们一起学Canvas API-HTMLCanvasElement，操纵画布元素的属性、方法和相关事件
yuanhongkun的博客
05-13 612
HTMLCanvasElement接口是提供用于操纵元素的布局和表示的属性和方法。该接口有两个相关属性。 属性是一个正 ，使用了 元素的 HTML 属性来反映该元素高度的 CSS 像素值。当该属性没有被定义，或被定义为一个无效值（如负值）时，将使用作为它的默认值。html javaScript 通过上面的代码得到 canvas 的高度。 属性是一个对应 元素 CSS 像素 的正整数。当这个属性没有指定时，或者被赋予一个不合法的值，比如一个负值，默认使用 300。html javaScript 通过上面的
vue3使用7--ref获取html页面元素
chencaw的专栏
08-26 7607
//例子需求：当页面加载完毕后，页面中的文本框可以直接获取焦点（自动获取焦点） 1、代码 <template> <h2>ref的另一个作用：可以获取页面中的元素</h2> <input type="text" ref="inputRef" /> </template> <script lang="ts"> import { defineComponent, onMounted, ref} from 'vue' expo..
nim-canvas：Nim HTML5 Canvas模块
02-02
nim-canvas 是一个专门为Nim设计的库，它提供了对HTML5 Canvas API的封装，使得在Nim中进行2D图形绘制变得简单而高效。 HTML5 Canvas 是一个在网页上绘制图形的JavaScript API，它允许开发者通过JavaScript代码动态...
canvas-text-editor-tutorial:使用html5 canvas的简单文本编辑器
05-25
我将尝试通过创建一系列教程来解决此问题，以说明文本编辑器的所有重要方面，同时使用HTML5 canvas和许多JavaScript代码创建可用的应用程序。 以下是按优先级排列的编辑器功能要求列表： 键盘光标导航和选择； ...
html5-canvas-mouse-ink
10-19
"html5-canvas-mouse-ink"这个项目显然与Canvas有关，特别是涉及到了鼠标交互和动画效果，这通常是用来创建某种动态视觉效果，比如跟随鼠标移动的墨迹效果。 在HTML5 Canvas中，`<canvas>`元素是核心，它是画布，而...
ec-canvas 实现echart图表显示
05-19
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
analog-stopwatch:使用 HTML5 Canvas 创建
07-13
Canvas是一个HTML元素，它的`<canvas>`标签提供了一个矩形区域，开发者可以在这个区域内通过JavaScript的绘图命令进行绘图。Canvas API提供了一系列的方法，如`fillRect()`用于填充矩形，`beginPath()`和`stroke()`...
了解 HTMLCanvasElement
记录点滴
06-03 3617
HTMLCanvasElement： 是所有 <canvas> 元素的代称（可以理解为是<canvas>标签的爹O(∩_∩)O哈哈~）。 类似的还有：HTMLDivElement -> 对应<div> 标签、HTMLImageElement -> 对应<img> 标签、HTMLParagraphElement 对应 <p>标签，几乎所有的标准HTML元素都对应有接口名称，然后全部都继承于：HTMLElement，完整的继承关系，下.
浅谈html2canvas实现浏览器截图的原理
前端程序猿steven的博客
12-16 7891
1、什么是html2canvas html2canvas可以直接截取特定dom元素内的所有内容并导出图片 官网地址： http://html2canvas.hertzen.com/ 2、使用方式 安装 npm i html2canvas -S 引入使用 // vue文件 <!-- 海报html --> <template> <div class="c-code" v-if="showOriImg"> <div clas
HTMLCanvasElement的两个方法 toBlob(), toDataURL()
haoyanyu_的博客
01-11 1万+
toBlob():  canvas.toBlob(callback, type, encoderOptions) 创造Blob对象， 泳衣展示canvas的图片，默认图片类型是image/png，分辨率是96dpi callback: 参数是blob对象的回调函数   toDataURL() : canvas.toDataURL(type, encoderOptions) 返回一个包...
html2canvas优化,优化HTML2Canvas的输出
weixin_36289292的博客
06-04 1842
＆＃13;$(document).ready(function(){var chart = AmCharts.makeChart("chartdiv1", {"type": "serial","theme": "light","dataProvider": [{"country": "USA","visits": 2025}, {"country": "China","visits": 1882}...
Canvas 的drawRect 几个参数理解
热门推荐
fenghuoliuling的专栏
02-18 1万+
摘自博客地址：http://blog.csdn.net/show214/article/details/8922597 昨天写了一个View视图，在上面画了一个矩形，这个视图的最后效果如图： 主要代码如下： package com.view; import com.example.testsql.R; import android.content.Context;
HTML5 Canvas实现web画图之自由绘制矩形
ydd24516的专栏
08-02 8531
该篇讲的主要是像windows附件中选择矩形框之后，可以在画布上自由绘制矩形功能的实现。
canvas自制画板
雷佳佳的博客
04-09 237
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
HTML5中canvas的fillRect、arc用法
sxj的专栏
11-20 8421
1、要使用html5，首先要有一个支持html5的浏览器，比如：火狐，谷歌等等，首先在body区域加入一个canvas标签，id为canvas-fram,如一下代码： 2、在head区域加入一个draw2D函数，在函数内通过document.getElementById("canvas-fram")获得canvas标签对象，然后在通过该对象的getContext("2d")获得可画图形的画板，最
基于window.html2canvas的打印功能。适用于打印浏览器上内容。将内容转换成图片来导出成PDF文件。VUE打印功能
qq_37193887的博客
03-17 1165
基于window.html2canvas的打印功能。适用于打印浏览器上内容。将内容转换成图片来导出成PDF文件。VUE打印功能 做一个记录 直接封装成一个方法printPDF vue项目直接调用打印方法：this.printPDF(document.getElementById("printPDF"),"打印文件的名称"); (document.getElementById("print...
HTML5 Canvas基础教程：JavaScript绘图入门
HTML5 Canvas 入门基础教程 Canvas是HTML5引入的一种强大的图形绘制技术，它允许开发者通过JavaScript脚本来在网页上创建动态图形、图表、图像合成或简单的动画效果。Canvas元素与传统的元素类似，但有明显的区别：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值