1.画圆以及圆弧

<style>canvas {margin: 0 auto;border: 2px solid #aaa;display: block; /*画布居中*/}
</style>
<body><canvas id="cont" width="500px" height="500px">Hello Canvas</canvas>   <script>var canvas = document.querySelector("#cont");//获取画布上下文var ctx = canvas.getContext('2d');//画圆ctx.beginPath();ctx.arc(250, 250, 150, 0, Math.PI*2, false);ctx.fillStyle = 'gold';ctx.fill();ctx.lineWidth = 3;ctx.strokeStyle = 'purple';ctx.stroke();//此处会自动加上closePath();//画圆弧ctx.beginPath();ctx.arc(50, 50, 50, 0, Math.PI, true);ctx.stroke();//此处会自动加上closePath();</script>
</body>

结果如图

2.画随机统计图

<style>canvas {margin: 0 auto;border: 2px solid #aaa;display: block; /*画布居中*/}
</style>
<body><canvas id="cont" width="500px" height="500px">Hello Canvas</canvas><script>var canvas = document.querySelector("#cont");//获取画布上下文var ctx = canvas.getContext('2d');//画坐标轴ctx.beginPath();ctx.moveTo(100, 100);ctx.lineTo(100, 400);ctx.lineTo(400, 400);ctx.stroke();ctx.closePath();/*ctx.fillRect(160, 200, 20, 200); //长方形左上角坐标以及长方形宽高ctx.fillRect(200, 200, 20, 200);*/for (var i = 0; i < 5; i++) {var height = Math.random()*280 + 10;  //[10, 290]//方法一：随机颜色，#后面拼接一个随机十六进制字符// ctx.fillStyle = '#'+parseInt(Math.random()*0xffffff).toString(16);//方法二：ctx.fillStyle = 'rgb(' + parseInt(Math.random()*256) + ',' + parseInt(Math.random() * 256) +',' + parseInt(Math.random() * 256) + ')';ctx.fillRect(160+i*40, 400-height, 20, height); }</script>
</body>

结果如图

3.清除画布

<style>canvas {margin: 0 auto;border: 2px solid #aaa;display: block; /*画布居中*/}
</style>
<body><canvas id="cont" width="500px" height="500px">Hello Canvas</canvas>   <script>var canvas = document.querySelector("#cont");//获取画布上下文var ctx = canvas.getContext('2d');ctx.rect(100, 100, 300, 200);//绿色矩形左上角的坐标以及宽高//填充ctx.fillStyle= 'green';ctx.fill();//描边ctx.strokeStyle = 'red';ctx.lineWidth = 5;ctx.stroke();//清除画布ctx.clearRect(120, 120, 180, 180); //左上角x、y的坐标，要清除的宽高</script>
</body>

结果如图

canvas画圆、随机统计图以及清除画布相关推荐

canvas画圆清除圆html,javascript,html5_js 用canvas 画圆清除问题？，javascript,html5 - phpStudy...
js 用canvas 画圆清除问题? 我在用js写一个五子棋游戏,利用canvas画棋盘和棋子,为了实现悔棋功能,我用clearRect()清除了原来的棋子,再重新画被清除的部分棋盘,却总是出现了一个 ...
canvas画圆又毛边
canvas画圆又毛边 canvas使用arc()画园有毛边,如图:,只需给其添加width,height即可,直接上代码 <!DOCTYPE html> <html lang=&q ...
php画圆锯齿,优雅的解决canvas画圆锯齿问题
canvas 解决canvas画圆锯齿问题之前做一各项目需要画一个饼图,于是使用HTML5的canvas元素画出来的.一看在移动端手机上测试都发现画图有一点锯齿明显问题, 1 效果如下代码如下 v ...
H5 canvas 画圆画圆角
canvas是H5的一大重点我们来学一下如何用canvas画圆画圆 arc(x,y,r,起始弧度,结束弧度,顺逆时针) x,y就是这个圆的圆心坐标 r是圆的半径弧度单位用Math.PI 顺逆时针 ...
canvas画圆和线条动画
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8 ...
HTML5 canvas画圆
今天就给大家演示一下使用canvas画圆 var canvas = document.getElementById("canvas"); canvas.width = 500; c ...
圆头像微信小程序绘图_微信小程序canvas画圆头像
wxml: wxss: canvas{ width:375px; height:100px } js const headImge = 'https://ss0.bdstatic.com/70cFvH ...
canvas 画圆角度问题
在使用canvas画布画圆的时候,我们使用 ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise) x:圆心x的坐标 :y:圆心y的坐标 ...
canvas笔记-使用canvas画圆及点阵的使用
如下例子: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...

canvas画圆、随机统计图以及清除画布

1.画圆以及圆弧

2.画随机统计图

3.清除画布

canvas画圆、随机统计图以及清除画布相关推荐

最新文章

热门文章