style type="text/css"
专注于为中小企业提供网站设计制作、成都网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业乌苏免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了近千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
!--
.tableborder {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
/*以上分别设置的是表格边框中上右下左的边框宽度*/
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
/*设置边框的表现样式,solid为实线*/
border-top-color: #0000FF;
border-right-color: #0000FF;
border-bottom-color: #0000FF;
border-left-color: #0000FF;
/*设置边框的颜色*/
}
--
/style
table width="300" height="100" border="0" align="center" cellpadding="0" cellspacing="0" class="tableborder"
tr
tdclass="tableborder"是对样式的调用,写在table标签内/td
td /td
/tr
/table
我已经做过canvas方面的开发了,对html5这个新的api很了解,首先你不要在style里面设width跟height,可以告诉你最后跟你设的坐标不一样,这里面原因是canvas的原始设置是有固定高跟宽的,所以你光设置style的css值,会产生很多问题,你就不要在css里面设,直接这样canvas width="" height="" 然后你为什么还会出现问题呢,你的canvas有自己的margin,所以它不是紧贴着最左上边的,你在style里面这样设html,body{margin=0;padding=0}#canvas{margin=0;padding=0},我估计你是在这里遇到问题了,你可以试试看
HTML5 Canvas基本绘制线条教程
怎么画线条?和现实中画画差不多:
1.移动画笔,使画笔移动至绘画的开始处
2.确定第一笔的停止点
3.规划好之后,选择画笔(包括画笔的粗细和颜色等)
4.确定绘制
因为Canvas是基于状态的绘制(很重要,后面会解释),所以前面几步都是在确定状态,最后一步才会具体绘制。
1.移动画笔(moveTo())
之前我们获得了画笔context,所以以此为例,给出改方法的使用实例——context.moveTo(100,100)。这句代码的意思是移动画笔至(100,100)这个点(单位是px)。记住,这里是以canvas画布的左上角为笛卡尔坐标系的原点,且y轴的正方向向下,x轴的正方向向右。
2.笔画停点(lineTo())
同理,context.lineTo(600,600)。这句的意思是从上一笔的停止点绘制到(600,600)这里。不过要清楚,这里的moveTo()``lineTo()都只是状态而已,是规划,是我准备要画,还没有开始画,只是一个计划而已!
3.选择画笔
这里我们暂且只设置一下画笔的颜色和粗细。
context.lineWidth = 5,这句话的意思是设置画笔(线条)的粗细为10px。
context.strokeStyle = "#AA394C",这句话的意思是设置画笔(线条)的颜色为玫红色。
因为Canvas是基于状态的绘制,所以我们在选择画笔粗细和颜色的同时,其实也是选择了线条的粗细和颜色。
4.确定绘制
确定绘制只有两种方法,fill()和stroke(),有点绘画基础的应该知道,前者是指填充,后者是指描边。因为我们只是绘制线条,所以只要描边就可以了。调用代码context.stroke()即可。
画一个线条
不就一条线段吗!废话了这么多!那我们就开始画吧。
JavaScript Code复制内容到剪贴板你的浏览器居然不支持Canvas?!赶快换一个吧!!
运行结果:
我还标注了一个页面解析图,供大家参考。
这里我将原本
标签中的width和height去掉了,但在JavaScript代码中设置了canvas对象的width和height的属性。
小结:要设置画布的大小,只有这两种方法
1.在标签中设置;
2.在JS代码中设置canvas的'属性.
怎么样,是不是非常的酷。接下来我们要加快脚步了,绘制一个多线条组成的图形。是不是感觉自己离艺术家又进了一步呢?别看这只是简简单单的一条线段,这一画只是我们的一小步,但却是人类的一大步!
绘制折线
上面我们已经成功绘制了一条线段。那么,如果我要绘制有两个笔画甚至是很多笔画的折线怎么办呢?
聪明的小伙伴肯定已经想到了,这还不简单,复用lineTo()就可以了。下面我就献丑随便画了一条优美的折线~
JavaScript Code复制内容到剪贴板你的浏览器居然不支持Canvas?!赶快换一个吧!!
运行结果:
绘制多条折线
那同理,我们要绘制多条样式各不相同的折线怎么办呢?比如我们在这里画三条折线,分别是红色、蓝色、黑色。聪明的小伙伴肯定想到了,这还不简单,只需要平移一下再改下画笔颜色就行了。代码格式都一样的,复制就可以了。代码如下。
JavaScript Code复制内容到剪贴板你的浏览器居然不支持Canvas?!赶快换一个吧!!
运行结果:
咦?是不是很奇怪?说好的先红色,再蓝色,再黑色呢?怎么全是黑色了?其实,这里的原因是我之前一直强调的一点——Canvas是基于状态的绘制。
什么意思呢?其实这段代码每次使用stroke()时,它都会把之前设置的状态再绘制一遍。第一次stroke()时,绘制一条红色的折线;第二次stroke()时,会再重新绘制之前的那条红色的折线,但是这个时候的画笔已经被更换成蓝色的了,所以画出的折线全是蓝色的。换言之,strokeStyle属性被覆盖了。同理,第三次绘制的时候,画笔颜色是最后的黑色,所以会重新绘制三条黑色的折线。所以,这里看到的三条折线,其实绘制了3次,一共绘制了6条折线。
那么,我想绘制三条折线,难道就没有办法了吗?艺术家之魂到此为止了么?没救了么?不,还有办法。
使用beginPath()开始绘制
为了让绘制方法不重复绘制,我们可以在每次绘制之前加上beginPath(),代表下次绘制的起始之处为beginPath()之后的代码。我们在三次绘制之前分别加上context.beginPath()。
JavaScript Code复制内容到剪贴板你的浏览器居然不支持Canvas?!赶快换一个吧!!
可以看到,这里得到了我们预想的结果。因为使用了beginPath(),所以这里的绘制过程如我们所想的那样,只绘制了三次,而且每次只绘制一条折线。beginPath()是绘制设置状态的起始点,它之后代码设置的绘制状态的作用域结束于绘制方法stroke()、fill()或者closePath(),至于closePath()之后会讲到。
所以我们每次开始绘制前都务必要使用beginPath(),为了代码的完整性,建议大家在每次绘制结束后使用closePath()。 ;
图片有点小,看不太清楚
文字颜色与下划线颜色不一致,说明不是text-decoration:underline;来写的,应该是划了一条线,然后相对右边的文字框定位;
下划线链接着两个文字框的两条斜线,应该是画的两条斜线,相对于文字框定位;
综上所述:
1,线条是画出来使用相对定位的;
2,线条有多种画法,比如一个width=1px的div,然后css旋转;或者使用png图片;或者html5的canvas等
使用canvas 标签
但是canvas只是图形容器,您必须使用脚本来绘制图形
使用CANVAS绘制矩形
canvas id="myCanvas"/canvas
script type="text/javascript"
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#00ff00';
ctx.fillRect(0,0,90,100);
/script
下面教大家画条直线,代码注释很详细不再多说。
canvas id="canvas"/canvas
script type="text/javascript"
var canvas=document.getElementById("canvas");
//设置绘图环境
var cxt=canvas.getContext('2d');
//开启新路近
cxt.beginPath();
// 设置笔触的宽度
cxt.lineWidth=2;
//设置笔触的颜色
cxt.strokeStyle="#ff0000";
//设定笔触的位置
cxt.moveTo(20,20);
//设置移动的位置
cxt.lineTo(200,20);
//画线
cxt.stroke();//这个时候的线已经出来了
//关闭路径
cxt.closePath();
//凡事路径图形必须先开始路径,画完之后必须结束路径
/script
下边代码是画三角形,分空心和实心两种实现。
canvas id="canvas1" width="300" height="300" style="background-color: yellow;"/canvas
script type="text/javascript"
var canvas=document.getElementById("canvas1");
var cxt=canvas.getContext("2d");
cxt.beginPath();
cxt.moveTo(100,50);
cxt.lineTo(50,200);
cxt.lineTo(150,200);
cxt.closePath();//填充或闭合 需要先闭合路径才能画
//空心三角形
cxt.strokeStyle="red";
cxt.stroke();
//实心三角形
cxt.beginPath();
cxt.moveTo(250,50);
cxt.lineTo(200,200);
cxt.lineTo(300,200);
cxt.closePath();
cxt.fill();
/script
你看看这个效果,满足要求否?
!DOCTYPE HTML
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8"
title无标题文档/title
style
.box{width:400px;height:400px;margin:50px auto; transition:5s linear;}
.box div{width:180px;height:180px;margin:10px;border:1px solid #000; box-sizing:border-box;float:left;background:url(new_bg.png) no-repeat;}
.box div:nth-child(1),.box div:nth-child(4){ border-radius:0 70%;}
.box div:nth-child(2),.box div:nth-child(3){ border-radius:70% 0;}
.box:hover{ -webkit-transform:rotate(720deg);}
/style
/head
body
div class="box"
div/div
div/div
div/div
div/div
/div
/body
/html
网站名称:html5线,html5线性渐变形状
网页路径:https://www.cdcxhl.com/article8/dseihop.html
成都网站建设公司_创新互联,为您提供营销型网站建设、网站排名、网站建设、搜索引擎优化、品牌网站制作、用户体验
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联