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>

时间： 2024-08-09 06:17:34

canvas绘制三角形的相关文章

canvas绘制直线多边形（二）

在绘制之前,依据上一节所说的内容获取context 2维画布 1 context.moveTo(x,y); 定义绘图开始 2 context.lintTo(x1,y1); 定义线条画到的位置 3 context.lineWidth=5; //线条宽度 4 context.strokeStyle="red" //线条颜色 5 context.stroke(); //用于绘制线条利用上述代码我们可以绘制一条,从(x,y)坐标开始,到(x1,y1)结束的宽5个像素,颜色为红色的直线

canvas绘制图形

第一步:html5页面中添加canvas元素 <canvas id="myCanvas" width="300" height="300"></canvas> 1.javascript绘制图形(矩形) <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.g

如何用 Canvas绘制图形

绘制矩形不同于SVG,HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径.不过,我们拥有众多路径生成的方法让复杂图形的绘制成为了可能. 首先,我们回到矩形的绘制中.canvas提供了三种方法绘制矩形: fillRect(x, y, width, height) 绘制一个填充的矩形 strokeRect(x, y, width, height) 绘制一个矩形的边框 clearRect(x, y, width, height) 清除指定矩形区域,

学习笔记：HTML5 Canvas绘制简单图形

HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" width="1024" style="border:1px solid #aaa;text-align:center;"> 你的浏览器不支持Canvas,请更新浏览器再试!!! </canvas> 在canvas标签之间应该做浏览器是否支持的检测,

Android Canvas绘制

public class DrawView extends View { public DrawView(Context context) { super(context); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); /* * 方法说明 drawRect 绘制矩形 drawCircle 绘制圆形 drawOval 绘制椭圆 drawPath 绘制任意多边形 * drawLine

H5实现绘制三角形并在其三个顶点画三个圆添加点击事件

1.效果如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <canvas id="canvas"></canvas> </body> <script type="text/javasc

用canvas绘制折线图

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>用canvas绘制折线图</title> 6 </head> 7 <body> 8 <canvas id="cv"></canvas> 9 </body> 1

封装用canvas绘制直线的函数--面向对象

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>用面向对象的思想封装在canvas绘制直线的函数</title> 6 </head> 7 <body> 8 <canvas id="cv"></canvas> 9 &

canvas绘制时钟

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas绘制钟表</title> <style type="text/css"> #canvas{ /*border: 2px solid red;*/ display: block; margin: 0 auto; } </style> </