web 画布 canvas 标签使用

画布标签

只有IE9之后才支持画布

<canvas id="lookwhatIdrew" width="600" height="200" ></canvas>

浏览器会根据宽度和高度在页面中为画布分配一些空间

画布默认是透明背景,所以没有绘制内容的话,在浏览器里是看不到的,我们可以增加一个css样式边框来显示出画布的大小和位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            border: 1px solid black;
        }
    </style>
</head>
<body>
<canvas id="lookwhatIdrew" width="600" height="200" ></canvas>
</body>
</html>

如下图所示
这里写图片描述

画布是透明的,所以可以叠加

在画布上画一个黑色方块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            border: 1px solid black;
        }
    </style>
    <script>
        window.onload=function () {
            var canvas = document.getElementById("lookwhatIdrew");//获取画布句柄
            var context = canvas.getContext("2d");//需要指明2d上下文
            context.fillRect(10,10,100,100);//画一个矩形,参数依次为 x坐标,y坐标,宽度,高度
        }
    </script>
</head>
<body>
<canvas id="lookwhatIdrew" width="600" height="200" ></canvas>
</body>
</html>

如下图所示
这里写图片描述

画矩形填充方法,没有填充色
填充色是通过context上下文设置的

context.fillStyle = "black";//设置要填充的颜色
context.fill();//填充

妥善的处理不支持画布的浏览器标签提示,浏览器遇到不认识的标签时候,默认行为就是显示其中包含的文本.

<canvas id="lookwhatIdrew" width="600" height="200" >Hey you,yes YOU,upgrade your browser!!</canvas>

也可以通过javascript来检测浏览器支不支持画布

画一个三角形

context.beginPath();//开始一个新路径
context.moveTo(100,150);//路径起点
context.lineTo(250,75);//从当前位置描到画布上的另一个点
context.lineTo(125,30);
context.closePath();////将路径的起点连接到最后一个点
context.lineWidth = 5;//线宽
context.stroke();//用线描述路径
context.fillStyle = "red";//设置颜色为红色来填充路径内区域
context.fill();//填充颜色

画一个圆

context.beginPath();
context.arc(x,y,radius,0,degreesToRadians(360),true);
//x,y圆心坐标,radius半径,0弧度起点/degreesToRadians(360)弧度终点,true顺时针/false逆时针
context.fillStyle = "lightblue";
context.fill();

function degreesToRadians(degrees) {
    return (degrees * Math.PI)/180;
}

画一个现有图片

var birdImage = new Image();
birdImage.src = "bird.png";
context.drawImage(birdImage,x,y,width,height);

画一个text

context.textAlign = "left";//左对齐 start,left  居中 center 有对齐 end,right
context.fillText("Text",x,y.maxwidth);//填充文本 x,y坐标 可选参数maxwidth,会导致文本相应缩放
context.strokeText("Text",x,y.maxwidth);//笔划文本

context.font = "2em Lucida Grande";//字体属性
context.textBaseline = "middle";//在文本所在的x,y坐标上画一条线

清除画布区域

 context.clearRect(0,0,canvas.width,canvas.height);
原文链接:加载失败,请重新获取