canvas 画图

最新推荐文章于 2024-08-14 16:59:54 发布

a_csdner

最新推荐文章于 2024-08-14 16:59:54 发布

阅读量380

点赞数

分类专栏： HTML5+CSS3 文章标签： html5

本文链接：https://blog.csdn.net/a_csdner/article/details/76691846

版权

HTML5+CSS3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

画圆

<!DOCTYPE html>
<html>
<head>
    <title>canvas画圆</title>
    <meta charset="utf-8">
</head>
<body>
    <canvas id="myCanvas" width="300px" height="300px"></canvas>
    <script type="text/javascript">
        var myCanvas=document.getElementById('myCanvas');
        var ctx=myCanvas.getContext('2d');
        ctx.clearRect(0,0,300,300);//清空画布
        ctx.beginPath();//开始路径
     ctx.arc(150,150,100,0,Math.PI*2,true);//x,y,r,start,end,direction(true-顺时针，false-逆时针)
        ctx.fillStyle='#ccc';//填充颜色
        ctx.strokeStyle='#000';//边框颜色
        ctx.fill();//填充
        ctx.stroke();//绘制
        ctx.closePath();//关闭路径
    </script>
</body>
</html>

矩形

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

线段

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

文字
font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

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

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");
    ctx.moveTo(0,0);
    ctx.lineTo(80,80);

    var grd=ctx.createLinearGradient(0,0,200,0);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");

    ctx.strokeStyle=grd;
    ctx.fill();
    ctx.stroke();

图像

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");

img.onload = function() {
    ctx.drawImage(img,10,10);
}

笔记