canvas之画一条线段

 1  var canvas=document.getElementById("canvas");
 2     //设置绘图环境
 3     var cxt=canvas.getContext(‘2d‘);
 4     //开启新路近
 5     cxt.beginPath();
 6     // 设置笔触的宽度
 7     cxt.lineWidth=10;
 8     //设置笔触的颜色
 9     cxt.strokeStyle="#00ff00";
10     //设定笔触的位置
11     cxt.moveTo(20,20);
12     //设置移动的位置
13     cxt.lineTo(100,20);
14     //画线
15     cxt.stroke();//这个时候的线已经出来了
16     //关闭路径
17     cxt.closePath();
18     //凡事路径图形必须先开始路径,画完之后必须结束路径

canvas之画一条线段

时间: 2024-10-16 15:02:01

canvas之画一条线段的相关文章

canvas之旋转一条线段

1 <canvas id="canvas" width="600" height="500" style="background-color: yellow;"></canvas> 1 var canvas=document.getElementById("canvas"); 2 var cxt=canvas.getContext('2d'); 3 cxt.lineWidth=10;

Html5新特性 &lt;canvas&gt;画板画直线

 下面例子为用canvas标签画多条直线 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht

HTML5 Canvas绘制环形进度条

最近比较迷恋canvas,加之做了一个个人网站,有用到环形进度条,记录下来. canvas中没有直接绘制圆的方法,但有一个绘制弧线的context.arc方法, 下面讲下用该方法如何绘制出图片效果. arc()方法介绍 context.arc(x,y,r,sAngle,eAngle,counterclockwise); 参数说明: x: 圆的中心的 x 坐标 y: 圆的中心的 y 坐标 r: 圆的半径 sAngle: 起始角,以弧度计.(弧的圆形的三点钟位置是 0 度) eAngle: 结束角,

当前插入的线段能完整覆盖存在的几条线段 树状数组 HDU 5372 Segment Game

http://acm.hdu.edu.cn/showproblem.php? pid=5372 Segment Game Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total Submission(s): 1284    Accepted Submission(s): 375 Problem Description Lillian is a clever girl so

几何画板中去除画出的线段的教程

在几何画板中作图和在黑板和纸上画图不一样,没有直接可以使用的橡皮擦或者黑板擦来将画的图擦除,但是在几何画板中如果画错了图或者不需要某个图形,也是可以不让它显示出来的,这样就不会妨碍继续作图.下面就以如何在几何画板中去除画出的线段为例给大家作详细介绍. 方法一 如果该线段没有子对象的,即没有其他图像是建立在这条线段基础上做出来的,那么这个线段就是独立存在的,去除它多作图没有任何影响的,这个时候要去掉线段的话,直接选中该线段,执行"编辑"--"剪切"命令或按Delete

UIBezierPath和CABasicAnimation画一条从左至右有动画的线

- (void)drawLine{ //view是曲线的背景view UIView *view = [[UIView alloc]initWithFrame:CGRectMake(10, 0, 300, 300)]; view.backgroundColor = [UIColor whiteColor]; [self.view addSubview:view]; //第一.UIBezierPath绘制线段 UIBezierPath *firstPath = [UIBezierPath bezie

[转]html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法

前面的文章我已经讲了3种在canvas中画曲线的方法:arc,arcTo以及quadraticCurveTo.他们都有一个共同点,就是他们画的曲线都只能偏向一边,今天讲的bezierCurveTo与他们最大的不同点就是有两个控制点,即可以画出S形的曲线了. bezierCurveTo,也就是所谓的贝赛尔曲线了,如果你学过某些画图工具,就能马上理解. bezierCurveTo的语法如下: ctx.bezierCurveTo(x1,y1,x2,y2,x,y);他的参数我照例解释一下,其中的(x1,

[转]html5 Canvas画图教程(9)—canvas中画出矩形和圆形

本文讲一下在canvas中画出矩形和圆形的办法,他们属于基础图形.当然,基础图形本来不止他们,但在canvas中,只有画矩形与圆形不需要用其他方法模拟. canvas画矩形 1,fillRect与strokeRect fillRect可以直接填充出一个矩形,填充样式是你当前设置的样式:同理strokeRect就是直接描边一个矩形 他们的参数是一致的,依次是(起点x坐标,起点y,矩形的宽,矩形的高).这里的起点,注意,是指矩形的左上角那个点. 我们通常用他们来做简单的事,他们也只能做简单的事.为什

[转]html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法

继续讲canvas中画曲线的方法,今天讲quadraticCurveTo. 说实话这个方法有点吓人,单从函数名称上都可以初体验.话说,我觉得有必要把这个函数名缩短. quadratic的意思是二次,即数学中二次元方程那个二次.而ctx.quadraticCurveTo的参数如下: 代码如下: ctx.quadraticCurveTo(x1,y1,x,y); 其中x,y是终点的坐标,而x1,y1是曲线控制点的坐标?什么?你问我起点在哪里?起点在此之前用moveTo确定. 我之所以把控制点的坐标带上