首页 > 代码库 > HTML 学习笔记 (canvas 基础)

HTML 学习笔记 (canvas 基础)

2024-08-30 11:25:35   246人阅读

1.什么是Canvas

canvas就是一个画布，可以进行画任何的线，图形，填充等一系列操作。这一切都是用Js操作的，另外Canvas不仅仅提供简单的二维矢量绘图，也提供了三维的绘图，以及图片处理等一系列的api支持。

创建canvas标签

<!--创建canvas元素-->
<canvas id="myCanvas"></canvas>

上面的标签只是一个画布，Id属性是必须的，后面要用Id来拿到当前的Canvas的Dom对象。通过此Canvase的Dom对象就可以获取他的上下文了，Canvas绘制图形都是靠着Canvas对象的上下文对象.

var myCanvas;

window.onload = function() {
    myCanvas = document.getElementById("myCanvas");
    //获取上下文
    var context = myCanvas.getContext("2d");
    
}

Context默认的有两种绘制模式：第一种绘制线(stroke) 第二种填充(fill)

 

使用canvas 画一个

Canvas绘制的总体的步骤

创建HTML页面，设置画布标签
编写js，获取画布dom对象
通过Canvas标签的Dom对象获取上下文
设置绘制线样式、颜色
绘制矩形，或者填充矩形

 

使用canvas绘制矩形

    <body>
        <!--创建canvas元素-->
        <canvas id="myCanvas10" width="500" height="500"></canvas>
        <script>
            var mycanvas = document.getElementById("myCanvas10");
            //获取上下文
            var context = mycanvas.getContext("2d");
            //设置绘画模式
            context.strokeStyle = "#FF0000";
            context.setLineWidth(1);
            //绘制矩形
            context.strokeRect(10,10,100,100);
            
            //填充模式
            context.fillStyle = "blue";
            context.fillRect(10,120,100,100);
        </script>
        
    </body>

效果图

技术分享

使用canvas绘制图片

var mycanvas = document.getElementById("myCanvas10");
            //获取上下文
            var context = mycanvas.getContext("2d");
            var image = new Image();
            image.src = "http://www.mamicode.com/img/FoterImage@3x.png";
            //当图片加载完成后
            image.onload = function() {
                context.drawImage(image,10,10);
            }

使用canvas绘制线条

Context对象的beginPath方法表示开始绘制路径，moveTo(x, y)方法设置线段的起点，lineTo(x, y)方法设置线段的终点，stroke方法用来给透明的线段着色。moveto和lineto方法可以多次使用。最后，还可以使用closePath方法，自动绘制一条当前点到起点的直线，形成一个封闭图形，省却使用一次lineto方法。

var myCanvas = document.getElementById("myCanvas10");
            var context = myCanvas.getContext("2d");
            //开始慧子路径
            context.beginPath();
            //设置线宽
            context.setLineWidth(5);
            context.strokeStyle = "#CC0000"; // 设置线的颜色
            context.moveTo(10,10);
            context.lineTo(10,60);
            context.lineTo(70,10);
            //设置两条线顶端的模式
            context.lineCap = "round";
            //设置两条线相交的模式
            context.lineJoin = "round";
            //如果只画两条线 使之称为闭合空间
            context.closePath();
            context.stroke();

效果图

技术分享

使用Canvas绘制文本

Context上下文对象的fillText(String,x,y)方法是用来绘制文本的，他的三个参数分别为文本内容，起点坐标x 起点坐标y 需用font设置字体、大小、样式（写法类似与CSS的font属性）。与此类似的还有strokeText方法，用来添加空心字。另外注意一点：fillText方法不支持文本断行，即所有文本出现在一行内。所以，如果要生成多行文本，只有调用多次fillText方法。

            var myCanvas = document.getElementById("myCanvas10");
            var context = myCanvas.getContext("2d");
            context.font = "Bold 20px Arial";
            context.textAlign = "left";
            context.fillStyle = "#FF0000";
            context.fillText("天下第一快",10,30);

效果：

技术分享

使用Canvas绘制圆和椭圆

在上一篇文章中，笔者已经跟大家介绍过了绘制矩形，绘制其他形状，比如圆形等，都是一个思路，只不过是方法不同罢了。那接下里给各位演示一小绘制圆形和椭圆。Context上下文的arc方法就是绘制圆形或者椭圆，arc方法的x和y参数是圆心坐标，radius是半径，startAngle和endAngle则是扇形的起始角度和终止角度（以弧度表示），anticlockwise表示做图时应该逆时针画（true）还是顺时针画（false）。

 <canvas id="demoCanvas" width="500" height="600"></canvas>
        <script type="text/javascript">
            //通过id获得当前的Canvas对象
            var canvasDom = document.getElementById("demoCanvas");
            //通过Canvas Dom对象获取Context的对象
            var context = canvasDom.getContext("2d");
            context.beginPath();//开始绘制路径
            //绘制以 （60,60）为圆心，50为半径长度，从0度到360度（PI是180度），最后一个参数代表顺时针旋转。
            context.arc(60, 60, 50, 0, Math.PI * 2, true);
            context.lineWidth = 2.0;//线的宽度
            context.strokeStyle = "#000";//线的样式
            context.stroke();//绘制空心的，当然如果使用fill那就是填充了。
        </script>

使用canvas设置渐变色

createLinearGradient方法用来设置渐变色。

设置渐变色
            var myCanvas = document.getElementById("myCanvas10");
            var context = myCanvas.getContext("2d");
            //createLinearGradient方法的参数是(x1, y1, x2, y2)，其中x1和y1是起点坐标，x2和y2是终点坐标。
            //通过不同的坐标值，可以生成从上至下、从左到右的渐变等等
            var myGradient = context.createLinearGradient(0,0,0,160);
            myGradient.addColorStop(0,"#FF0000");
            myGradient.addColorStop(0.5,"#BABABA");
            myGradient.addColorStop(1,"#00FF00");
            context.fillStyle = myGradient;
            context.fillRect(10,10,200,200);

效果图：

技术分享

 

使用Canvas绘制阴影

绘制阴影
            context.shadowOffsetX = 10;//设置水平位移
            context.shadowOffsetY = 10;//设置垂直位移
            context.shadowBlur = 5;//设置模糊程度
            context.shadowColor = "#cc0000";            
            context.fillStyle = "red";
            context.fillRect(10,10,200,100);

效果图

技术分享

 

 //save方法用于保存上下文环境，restore方法用于恢复到上一次保存的上下文环境。

 

ctx.save(); 
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 5;
ctx.shadowColor = rgba(0,0,0,0.5);
ctx.fillStyle = #CC0000;
ctx.fillRect(10,10,150,100);
ctx.restore(); 
ctx.fillStyle = #000000;
ctx.fillRect(180,10,150,100);

//先用save方法，保存了当前设置，然后绘制了一个有阴影的矩形。接着，使用restore方法，恢复了保存前的设置.

参考博客 http://www.2cto.com/kf/201502/376960.html

HTML 学习笔记 (canvas 基础)


联系
我们