html5中canvas的一个简单的例子

作者：袖梨 2022-06-25

买了两本关于HTML5的书，一本《HTML5揭秘》，一本《HTML5高级程序设计》，现在在看《html5揭秘》网上说这本书是非常入门的一本，《HTML5权威指南》就相对深一点。所以买了揭秘，没买指南。都说HTML5的canvas很重要，所以这里把书上关于canvas的一些简单例子，给试着自己写了一遍，放上来把

代码如下

复制代码

window.onload = function(){
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    /*
    context.fillStyle = "#5746CD";
    context.fillRect(50,25,100,100);
    context.strokeStyle = "#1245d8";
    context.strokeRect(50,25,200,200);
    */


    //画一个坐标系
    /*
    context.font = "bold 13px sans-serif";
    context.beginPath();
    for(var x = 0.5;x < 500;x = x + 10)
    {
        context.moveTo(x,0);
        context.lineTo(x,490);
        if((x - 0.5)%50 == 0)
        {
            context.fillText(x-0.5,0,x);
        }

    }
    for(var y = 0.5;y < 500;y = y + 10)
    {
        context.moveTo(0,y);
        context.lineTo(490,y);
        if((y - 0.5)%50 == 0)
        {
            context.fillText(y-0.5,y,10);
        }
    }
    context.strokeStyle = "#dddddd";
    context.stroke();

    context.beginPath();
    //垂直箭头
    context.moveTo(30,20);
    context.lineTo(30,480);
    context.moveTo(20,470);
    context.lineTo(30,480);
    context.moveTo(40,470);
    context.lineTo(30,480);
    //水平箭头
    context.moveTo(30,20);
    context.lineTo(480,20);
    context.moveTo(470,10);
    context.lineTo(480,20);
    context.moveTo(470,30);
    context.lineTo(480,20);
    context.strokeStyle = "#000000";
    context.stroke();

    //文字
    //context.textBaseline = "top";

    context.fillText("X",460,10);
    context.fillText("Y",0,470);
    context.fillText("(500,500)",400,470);
    */
    //渐变
    //var gradient = context.createLinearGradient(0,0,0,300);//线性渐变
    var gradient = context.createRadialGradient(50,50,30,60,60,50);//径向渐变
    gradient.addColorStop(0,"black");
    gradient.addColorStop(1,"white");
    context.fillStyle = gradient;
    context.fillRect(0,0,300,225);
    canvas.onclick = function(){
        //context.strokeRect(10,10,100,300);
        //context.clearRect(60,30,70,70);

    }
}

其实本文章就介绍了html5中canvas的几个简单的常用功能了，它还有更强大的功能以后小编为各位补充上。

相关文章

精彩推荐