canvas 画图

来源：互联网发布：非农数据股市编辑：程序博客网时间：2024/05/15 23:18

画圆

<!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);}

笔记

阅读全文

0 0