HTML5-canvas的使用方法介绍

canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。

　　注意: 默认情况下 canvas> 元素没有边框和内容。

　　画方

!--fillStyle是填充样式，如果不设置fillStyle属性，默认填充色为黑色，fillRect是画一个矩形，参数为X,Y,Width,Height-->
    !DOCTYPE htML>
    html>
    head>
    meta charset="UTF-8" name="author" content="赵慧娟">
    tITle>
    /title>
    script src="Scripts/jquery-1.10.2.js?1.1.10">
    /script>
    script type="text/javascript">
$(function(){
    VAR canvas=document.getElementById("myCanvas")var ctx=canvas.getContext("2d");
                    ctx.fillStyle="deeppink";
                    ctx.fillRect(10,10,100,100);
    
　　　　　　　　  //ctx.moveTo(0,0);
    　　　　//定义开始坐标
　　　　　　　　　//ctx.lineto(100,100);
    　　//定义结束坐标
　　　　　　　　　//ctx.stroke();
    　　　　　　//绘制线条

            }
    )/script>
    /head>
    body>
    canvas id="myCanvas" width="100" height="100">
    /canvas>
    /body>
    /html>
    

运行结果：

　　画圆

!--arc画圆，参数是X,Y,半径，起始角，结束角，顺时针/逆时针(可选)XY指的是圆点的距离-->
    !DOCTYPE html>
    html>
    head>
    meta charset="UTF-8" name="author" content="赵慧娟">
    title>
    /title>
    script src="Scripts/jquery-1.10.2.js?1.1.10">
    /script>
    script type="text/javascript">
$(function(){
    var canvas=document.getElementById("myCanvas")var ctx=canvas.getContext("2d");
                    ctx.fillStyle="deeppink";
                    ctx.arc(50,50,50,0,2*Math.PI);
                    ctx.stroke();
    
　　　　　　　　　//ctx.fillText("Hello World",10,50);
    　　//绘制实心字体
　　　　　　　　　//ctx.strokeText("Hello World",10,50);
　//绘制空心字体
}
    )/script>
    style type="text/css">
canvas{
    border: 1px solid #000;
}
    /style>
    /head>
    body>
    canvas id="myCanvas" width="100" height="100">
    /canvas>
    /body>
    /html>
    

运行结果：

@H_973_512@

　　渐变

　　createLineargradient(x,y,x1,y1) - 创建线条渐变

　　createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

// 创建渐变var grd=ctx.createLinearGradient(0,0,200,0);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"blue");
     // 填充渐变ctx.fillStyle=grd;
    ctx.fillRect(10,10,150,80);
    

运行结果：

　　径向/圆渐变

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
     // 创建渐变var grd=ctx.createRadialGradient(75,50,5,90,60,100);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");
     // 填充渐变ctx.fillStyle=grd;
    ctx.fillRect(10,10,150,80);
    

运行结果：

图像

!DOCTYPE html>
    html>
    head>
    meta charset="UTF-8" name="author" content="赵慧娟">
    title>
    /title>
    script src="Scripts/jquery-1.10.2.js?1.1.10">
    /script>
    style type="text/css">
canvas{
    border: 1px solid #000;
}
#flower{
    border: 1px solid #000;
    width: 100px;
    height: 100px;
}
    /style>
    /head>
    body>
    img src="img/a.ico" id="flower" />
    canvas id="myCanvas" width="100" height="100">
    /canvas>
    script type="text/javascript">
$(function(){
    var canvas=document.getElementById("myCanvas")var ctx=canvas.getContext("2d");
    var img=document.getElementById("flower");
                img.onload=function(){
                        ctx.drawImage(img,20,20,80,80);
　　//drawImage（对象，X,Y，W,H）}
            }
    )/script>
    /body>
    /html>
    

运行结果：

以上就是HTML5-canvas的使用方法介绍的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！