用canvas画布绘制扇形和弧线

<title>用canvas画布绘制扇形和弧线</title>

<style>

.box{

width: 600px;

margin: 0 auto;

}

</style>

</head>

<body>

</div>

window.onload = function(){

// 抓取元素

var mycan = document.getElementById('mycan');

// 通过js脚本，给画布指定宽度和高度

mycan.width =600;

mycan.height =600;

// 通过js脚本，给画布添加边框色

mycan.style.border = '1px solid orange';

// 调用getContext(),返回给我们一个对象，这个对象里提供了若干个方法，供我们去绘制图形

var ctx = mycan.getContext('2d');

// 1.设置当前线条的宽度(用宽度为 10 像素的线条来绘制图形)

ctx.linewidth =6;

// 2.绘制图形的填充颜色样式

ctx.fillStyle = 'pink';

// 3.绘制图形的边框色的样式

ctx.strokeStyle = 'red';

// 画画 ----逆时针绘制300度的扇形

// 从圆心到弧线起点

// 开始绘制路径

ctx.beginPath();

ctx.moveTo(100,100);

// 圆心的坐标(100,100)

ctx.arc(100,100,100,0*Math.PI/180,60*Math.PI/180,true);

// 再到终点，再闭合（结束绘制路径）

ctx.closePath();

ctx.fill();

ctx.stroke();

// 画画 ---- 绘制120度弧线（特别注意：你在绘制弧线的时候，不能使用closePath()去闭合路径！！）

// 从弧形的起点到弧线的终点

ctx.beginPath();

ctx.moveTo(300,200);

// 圆心的坐标(200,200)

ctx.arc(200,200,100,0*Math.PI/180,120*Math.PI/180);

ctx.stroke();

// 画画 ----逆时针绘制60度的扇形

// 从圆心到弧线起点

// 开始绘制路径

ctx.beginPath();

ctx.moveTo(400,400);

// 圆心的坐标(400,400)

// ctx.arc(400,400,100,0*Math.PI/180,300*Math.PI/180,true);

ctx.arc(400,400,100,0*Math.PI/180,60*Math.PI/180,false);

// 再到终点，再闭合（结束绘制路径）

ctx.closePath();

ctx.fill();

ctx.stroke();

}

</script>

</body>

用canvas画布绘制扇形和弧线相关推荐

用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
教你如何利用canvas画布绘制哆啦A梦
教你如何利用canvas画布绘制哆啦A梦最近一直在练习使用canvas画布标签,今天教大家如何使用canvas画布绘制哆啦A梦.如图: HTML代码: <canvas id="my_ ...
用canvas画布绘制等腰三角形
<title>用canvas画布绘制等腰三角形</title> </head> <body> <canvas id="mycan&quo ...
canvas学习绘制扇形
1.自己用canvas绘制的一个丑丑的扇形(两个圆弧+一个梯形) <!DOCTYPE html> <html lang="en"> <head> ...
canvas 画布绘制时钟
利用canvas绘制时钟的一个小demo <!--* @Author: 164591357@qq.com 164591357@qq.com* @Date: 2022-08-06 11:04:07 ...
微信小程序Canvas画布绘制以及保存
<canvas canvas-id="firstCanvas" style="width: 320px;height: 500px;" bindlongt ...
探索canvas画布绘制技术
图片来自KrzysztofBanaś 下面我们开始尝试研究不同的绘图风格和技术 - 边缘平滑,贝塞尔曲线,墨水和粉笔,笔和印章和图案 -等等.事实证明,网上没有太多关于此的内容.在下面的示例中,您请大 ...
HTML5——Canvas画布绘制图像、绘制线型和绘制图片
一.创建路径创建路径的步骤: 标识开始创建路径-设置图像属性-(标识结束创建路径)-绘制图像 1.标识路径的方法 beginPath()-表示开始创建路径(不可缺省) closePath()-表示结 ...
HTML5利用canvas画布绘制哆啦A梦
效果图: 源码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...

用canvas画布绘制扇形和弧线

用canvas画布绘制扇形和弧线相关推荐

最新文章

热门文章