js绘制直线

效果图

html结构

<!DOCTYPE html>

<html>

<head>

<title>canvas1</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.moveTo(10,10);

context.lineTo(700,700);

context.lineWidth = 10;

context.strokeStyle = "#058";

context.stroke();

}

</script>

时间： 2024-10-12 22:58:53

js绘制直线的相关文章

js 利用canvas绘制直线、曲线

<body>  // 当浏览器不支持的时候才会出现文字 <canvas id="canvas" style="background-color: black;">您当前的版本不支持 </canvas> <script type="text/javascript"> // 拿到画板 var canvas = document.getElementById('canvas'

用户可以在CAD控件视区任意位置绘制直线. 主要用到函数说明: _DMxDrawX::DrawLine 绘制一个直线.详细说明如下: 参数说明 DOUBLE dX1 直线的开始点x坐标 DOUBLE dY1 直线的开始点y坐标 DOUBLE dX2 直线的结束点x坐标 DOUBLE dY2 直线的结束点y坐标 js中实现代码说明: function DrawLine() { //清空当前显示内容 mxOcx.NewFile(); //把颜色改回黑白色 mxOcx.DrawCADColorInd

封装用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 &

利用d3.js绘制中国地图

d3.js是一个比较强的数据可视化js工具.利用它画了一幅中国地图,如下图所示: 源码如下: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="d3.js"></script> <script type="text/javascript" src="d3.csv.js">&l

2. Quartz2D 绘制直线

#import <UIKit/UIKit.h> @interface MyView : UIView @end #import "MyView.h" @implementation MyView -(void) drawRect:(CGRect)rect{ [self drawLine]; } #pragma mark - 绘图方法 #pragma mark 绘制直线 -(void) drawLine{ //提示:使用Ref声明的对象,不需要用* //1. 获取上下文 -

利用d3.js绘制雷达图

利用d3,js将数据可视化,可以做到数据与代码的分离,方便以后修改数据. 这次利用d3.js绘制了一个五维的雷达图,即将多个对象的五种属性在一张图上对比. 数据写入data.csv.数据类型写入type.csv文件. 效果如下图所示源码连接:http://download.csdn.net/detail/svap1/7358123 使用是只需调用 radar()函数即可,如下是测试页面代码. <!DOCTYPE html> <html> <head> <meta

CALayer上绘制直线+position

/* 1. position:确定当前图层的锚点到父视图层坐标到原点的相对偏移量,在当前图层上找出锚点位置,将两者对齐 2. 绘制直线三部曲:创建可变路径(pathCreateMutable) : 添加到context(addPath) :开始绘制(drawPath) 途径阶段2:起始点确定, 属性设置(线宽和颜色) */

DDA_为微分绘制直线算法

DDA_为微分绘制直线算法以步进坐标轴部长=1像素为单位,计算y=kx + b,绘制像素点(x, round(y)). 即步进坐标增长1, 另一坐标增长K或者1/k. 程序如下: 1 //数值微分算法DDA 2 void CCGProjectWorkView::DDA_Line(const int startPos[], const int endPos[], const float lineColor[]) 3 { 4 glPushMatrix(); 5 //绘制直线 6 long delt

js 绘制数学函数

<html lang="en"> <head> <meta charset="UTF-8"> <title>js绘制数学函数</title> </head> <body> <div id="main" style="border-bottom:solid red 0px;he