canvas绘制三角形

效果图

html结构

<!DOCTYPE html>

<html>

<head>

<title>canvas2</title>

</head>

<body>

当前浏览器不支持canvas,请更换浏览器后再试

</canvas>

</body>

</html>

js脚本

window.onload = function(){

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

canvas.width = 800;

canvas.height = 800;

var context = canvas.getContext('2d');

context.beginPath();

context.moveTo(100,100);

context.lineTo(700,700);

context.lineTo(100,700);

context.lineTo(100,100);

context.closePath();

context.lineWidth = 10;

context.strokeStyle = "#058";

context.stroke();

}

</script>

转载于:https://blog.51cto.com/suyanzhu/1892680

canvas绘制三角形相关推荐

用canvas绘制三角形
function drowTriangle() { //绘制三角形 var c = document.getElementById('mycanvas') //获取画板对象var ctx = c.ge ...
小练手：用Canvas绘制谢尔宾斯基三角形
转载<小练手:用Canvas绘制谢尔宾斯基三角形> 补充作者第二种画法的完整程序: PS:修改function SierpinskiTriangle(p,len,depth = 9)中d ...
Canvas | 绘制矩形、实心空心圆、三角形、线条
#Canvas ##基本属性一个画布在网页中是一个矩形框默认情况下 canvas 元素没有边框和内容.使用 style 属性来添加边框: canvas 元素本身是没有绘图能力的.所有的绘制工作必须 ...
前端使用canvas绘制立体三角形
前端绘制立体效果的三角形的demo 在移动端使用时,需要自适应屏幕.canvas上无法设置rem,所以在canvas外加一个父级元素设置为rem,再将canvas的宽高设置为100% 100%. 如果 ...
HTML5画布（canvas）绘制三角形，矩形，圆形
canvas标签: <canvas id="cavsElem" width="400" height="300">您的浏览器不支 ...
android canvas绘制圆角_Android自定义View撸一个渐变的温度指示器(TmepView)
秦子帅明确目标,每天进步一点点..... 作者 | andy 地址 | blog.csdn.net/Andy_l1/article/details/82910061 1.概述自定义View对需要 ...
WebGL（五）——WEBGL缓冲区，绘制三角形
WebGL(五)--WEBGL缓冲区,绘制三角形在 WebGL(四)-- 第一个WEBGL程序一篇中,留了一个问题, 像下面这样的写法,字符串拼接真的很让人觉得麻烦: 关于改进: 缓冲区对象缓冲 ...
Canvas学习：封装Canvas绘制基本图形API
Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方法, ...
canvas绘制图形
第一步:html5页面中添加canvas元素 <canvas id="myCanvas" width="300" height="300&quo ...

canvas绘制三角形

canvas绘制三角形相关推荐

最新文章

热门文章