canvas画布本身不能绘画，它必须通过javascript来实现它的绘画功能，getContext('2d'),是它里面的内部对象，它里面封装了绘画的方法，大家一看见2d
是不是很兴奋，但是canvas很纯洁，并没有3d功能，我们建立好了模版，可以进行下一步了。
html5 canvas画布绘制矩形和圆形
3绘制一个矩形，填充颜色，这里面有两个知识点，fillStyle fillRect(0,0,100,100),fillRect有四个参数，前两个代表，x,y，表示位置，后两个代表长宽。蓝色方框就是我们的显示效果
1绘制一个圆型，beginPath ()表示路径开始，arc(0,0,50,0,Math.PI*2,true)参数解释前两个代表xy，第三个代表半径，第四个代表结束角度，第五个代表圆周率，第五个代表顺逆，
2我们再做一个复杂的图形，做一个笑脸
3我们已经学习canvas基本的 *** 作了
在HTML中把块的边框做成圆角需要利用css的border-radius属性。
*** 作步骤：
1、打开Adobe Dreamweaver CC 2015。
2、执行菜单栏中的"文件的新建"命令或按住Ctrl+N键打开"新建文档"对话框，选择其文档类型为HTML，单击"创建"按钮，即创建一个网页文档。
3、在<body>和</body>之间添加"<form></form>"，如下图所示。表单使用的<form>标记是成对出现的，在首标记<form>和尾标记</form>之间的部分就是一个表单。
4、在<form>和</form>之间添加"<input name="text" type="submit" value="登录" class="input_box">"，如下图所示。
5、在<head>和</head>之间添加"<style type="text/css"></style>"，如下图所示。
6、在<style type="text/css">和</style>之间添加".input_box{width:360pxheight:40pxborder-radius:20pxborder-style:nonebackground:#ec6941font-size:14pxcolor:rgba(249,248,248,1.00)}"，如下图所示。
7、保存网页文件，按住F12键可以在浏览器中预览效果，如下图所示。
语法说明
输入<input>是个单标记，必须嵌套在表单标记中使用，用于定义一个用户的输入项。
name属性：输入字段的识别名称，传递数据时的参数名称。
type属性：输入字段的类型。button是表单通用按钮。
value属性：表单字段预设数据值。例如用于button、submit、reset等字段类型指的是按钮标签的显示文字。
class属性：对应于网页中的CSS选择器名称。
你可以试试2个div都设一下背景，一个模糊的放底层，清晰的放上层，通过控制清晰的那个div的位置和背景位移来达到你要的效果，或者你网上搜一下模糊滤镜的js脚本来实现，当然，如果你那个清晰的圆形的位置是固定不变的，那么你还是把这个效果用ps做成一张图是最好的，这也是最方便的，做网页设计不要纠结于技巧，能用最简单的方式达到效果是最好的方式，如果是我，我肯定就是做2个图片来实现效果最简单快捷欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）