绘制常规图案
image.png
<body>
<canvas id="myCanvas" width="300" height="100" style="border:1px solid red"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d"); //创建 context 对象：
ctx.fillStyle="#cccccc"; //填充绘画的颜色
ctx.fillRect(0,0,300,100); //设置"被填充"的矩形(x0,y0,x1,y1)。
ctx.font="30px Arial"; //设置字体大小，字体
ctx.fillStyle="#0099CC"; //设置字体填充颜色
ctx.fillText("1234",0,30); //设置填充的字体，起始位置
ctx.strokeStyle="#FF0000"; //设置线段颜色
ctx.moveTo(20,10); //线段起始位置(x0,y0)
ctx.lineTo(200,50); //线段结束为止(x1,y1)
ctx.stroke(); //绘制已定义的路径。
ctx.fillStyle="#FF0000"; //实心圆的填充颜色
ctx.beginPath(); //起始一条路径，或重置当前路径。
ctx.arc(40,40,5,0,2*Math.PI); //设置圆弧的(x,y,r,起始角,结束角)
ctx.fill(); //填充当前绘图（路径）
</script>
</body>
网友评论