用canvas画布绘制等腰三角形

<title>用canvas画布绘制等腰三角形</title>

</head>

<body>

window.onload = function(){

// 抓取元素

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

// 设置宽度和高度

mycan.width =900;

mycan.height =900;

// 设置画布的边框

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

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

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

console.log(ctx);

// 绘制路径起点

ctx.beginPath();

// 400 * Math.sin(Math.PI/3)

// Math.floor()

//var height = Math.floor(400 * Math.sin(Math.PI/3));

var height =600;

console.log(height);

// 1.起点---A点的坐标(400,10)

ctx.moveTo(400,10);

// 2.第2个点---B点的坐标

ctx.lineTo(0,height);

// 3.第3个点---C点的坐标

ctx.lineTo(800,height);

// 闭合路径

ctx.closePath();注意把闭合写在上面，然后在用轮播线填充

ctx.strokeStyle = 'red';

ctx.stroke();

ctx.fillStyle = 'pink';

ctx.fill();

}

</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> <style> .box{ width: 600px; margin: 0 auto; } < ...
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=" ...
s时钟画布 android,Canvas画布实现自定义时钟效果
标题 *{margin:0; padding:0; list-style:none;} .box{ width: 420px; height: 420px; margin: 50px auto 0; ...

用canvas画布绘制等腰三角形

用canvas画布绘制等腰三角形相关推荐

最新文章

热门文章