html5中的canvas属性一些简单例子

最新推荐文章于 2023-03-19 15:46:29 发布

Annaluo

最新推荐文章于 2023-03-19 15:46:29 发布

阅读量614

点赞数 1

分类专栏： JavaScript 文章标签： html5 canvas javascript html class

本文链接：https://blog.csdn.net/Annaluo/article/details/78469390

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
    您的浏览器不支持 HTML5 canvas 标签。
</canvas>

<script>
    /*//画一个矩形
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,100,100);*/

    //在canvas上画线
    /*var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(200,200);
    ctx.stroke();*/

    //在canvas上画圆  arc(x,y,r,start,stop)
    /*var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.stroke();*/

    //使用canvas绘制文本
    /*var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.font = "30px Arial";
    /!*ctx.fillText("hello ",10,50);   //实心文字*!/
    ctx.strokeText("hello",10,50);  //空心文字*/

    //canvas中颜色渐变
    /*var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    //创建渐变
    var grd = ctx.createLinearGradient(0,0,200,0);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");
    //填充渐变
    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);
</script>

</body>
</html>

Annaluo

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5中的canvas属性一些简单例子

html>lang="en"> charset="UTF-8"> canvasid="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> 您的浏览器不支持 HTML5 canvas 标签。 /*//画一个矩形 var c=document.getElem
复制链接

扫一扫

专栏目录