用canvas画布绘制等腰三角形
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();
}
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!
