当前位置:首页 > 日记 > 正文

HTML5+CSS3绘制一个矩形锯齿

HTML5+CSS3绘制一个矩形锯齿
最近,通过敲HTML5 + CSS3分享你认为值得学习与你分享。

如何绘制一个曲折矩形:一个数字
我们知道绘图可以使用画布,画布是HTML5中出现的一种新标签,用于在网页上绘制图形,H5的画布使用Javascript在网页上绘制图形。
锯齿状矩形是用帆布绘制的。

实现代码:

xml代码将内容复制到剪贴板。

锯齿图

Window.addEventListener(负荷
功能eventwindowloaded(){
变量x,y;
VAR之外= document.getelementbyid(画布);
VaR上下文= thecanvas.getcontext(2D);
context.strokestyle =# cb9a61;
上下文:线宽= 10;
context.strokerect(10, 10,thecanvas.width-20,height-20之外。);
context.fillstyle =# ffffff ;
为(x = 5;x <= canvas.width;XX = x + 10){
Context.beginPath();
context.arc(x,5,5,0,数学。π×2,真的);
context.arc(x,帆布。height-5,5,0,数学。π×2,真的);
Context.closePath();
Context.fill();
}
为(y = 5;Y <= canvas.height;YY = y + 10){
Context.beginPath();
context.arc(5,y,0,数学。π×2,真的);
context.arc(canvas.width-5,y,0,数学。π×2,真的);
Context.closePath();
Context.fill();
}
}

如何写出一个形状如下:一个矩形被分成两部分,一个斜杠分开,两个颜色:
首先,它是一个思路,它分为两部分和两个颜色,使用一个div和对角线在中间。但这并没有实现。由于前台的不足和能力有限,还有另一个计划。

有三个div,大约两个div,设置宽度和高度,在这部分起着重要作用:
事实上,它是一个长方形,分成两个三角形,最后达到了上述效果。另一种思维方式,实现如此简单,不能挂在树上。

代码如下:

xml代码将内容复制到剪贴板。

继续总结一些关于HTML和CSS的知识。前台的知识看起来很简单,但它是一项细致的工作,可以锻炼一个人的耐心。从简单到复杂,从入门到深入,一点点提高自己。

相关文章

WPS表如何隐藏单元格WPS表教程

WPS表如何隐藏单元格WPS表教程

教程,单元格,电脑软件,WPS,如果我们需要在WPS表单中隐藏一些单元格,那么如何隐藏它呢让我们告诉你如何在WPS表中隐藏单元格。 在WPS表中隐藏单元格的方法: 请看下面的表格,第一步:如果我们想隐藏的2此内容,我们需要选择表,然后单击格式工具栏的…

PS图象处理软件照片合成:人物海报

PS图象处理软件照片合成:人物海报

照片,图象,处理软件,海报,人物,本教程是关于PS图象处理软件照片合成的使用:角色海报,通过教程,用户可以对PS图像处理的综合使用功能有了一定的了解,不仅可以加强PS技术,也提高了他们的创意和平面设计的理解。 你好,本课程将为你带来一个对火影忍…

如何使用PPT动画笔刷复制PPT动画效

如何使用PPT动画笔刷复制PPT动画效

动画效果,教程,动画,如何使用,笔刷,大家都知道,你可以用动画笔刷在PPT中复制动画效果。那么,你知道怎么使用动画笔刷吗让我们告诉你如何使用PPT动画复制动画效果。 利用PPT动画画笔复制动画效果的方法: 打开一个很好的ppt,比如: 选择幻灯片,例…

AI只是简单地绘制建筑图标的平面样

AI只是简单地绘制建筑图标的平面样

平面,绘制,标的,样式,简单,今天为大家分享AI简单渲染平面风格的建筑图标方法,感兴趣的朋友可以参考一下这篇文章,希望大家喜欢! 步 1、在AI软件中,新建一个800×800的文件,按Shift键选择圆角矩形工具,画两个圆图,如图所示。 2、然后选择直线工具…

MySQLbinlog远程备份方法详解

MySQLbinlog远程备份方法详解

备份,方法,详解,电脑软件,MySQLbinlog,当binlog以前的备份,这是所有本地备份和压缩,然后发送到远程服务器。但仍有一些风险,因为日志备份是周期性的,如果在一个周期内,服务器关闭,硬盘损坏,它可能会导致这段时间binlog迷失。 此外,使用脚本来备份…

ZendStudio使用两种技术

ZendStudio使用两种技术

两种,技术,电脑软件,ZendStudio,本文介绍了两Zend Studio的使用技巧,分享给您参考,如下: 1。新文档的模板设置: 窗口> >选项> > >编辑器>模板>新的简单PHP文件 这可以修改每个新文件的启动代码。 2。自动提示代码很慢: 窗口> >选项> >编辑…

Javascript使用正则表达式替换字符串的内

Javascript使用正则表达式替换字符串的内

正则表达式,替换字符串,内容,电脑软件,Javascript,如果您不多说,请参阅代码的具体实现。 从这一切'是 / /串is'cut'is: var str =这一切; VaR在= new RegExp(' '); / /创建一个正则表达式对象 VaR结果= str.replace(substr,); / / 'is'with空…

在centos6.4用yuminstallmysql

在centos6.4用yuminstallmysql

电脑软件,yuminstallmysql,在开发软件时,基本上涉及到数据的使用,例如最简单的用户登录注册,这需要用户使用数据库进行存储管理。 下面是一个小的河与你分享:如何使用百胜在CentOS系统安装MySQL数据库,以centos6.4为例。 工具/材料 百胜的图…

第三自举网格基础

第三自举网格基础

网格,基础,电脑软件,引导程序提供了一个响应流网格系统,移动设备是首选,随着屏幕或视口(视口)尺寸的增加,系统将自动分成多达12列。 网格系统类似于一个表、一个行和一个列,它必须放在一个容器类型中被设置为容器,div可以放在列、内容、网格中为…

PS制作美丽多彩的立体角色

PS制作美丽多彩的立体角色

多彩,角色,美丽,电脑软件,PS,我们经常在网页上看到一些漂亮的立体字。下面我想介绍一种制作ps 3D字符的简单方法。没有朋友可以参考这篇文章。我希望你喜欢这个教程。 步 首先,新建一个图层,大小可以自行固定,像素为72。 选择文本命令,选择字…

Excel2007将一个默认文件夹添加到

Excel2007将一个默认文件夹添加到

默认,窗口,电脑软件,2007 Excel保存窗口的左边,不想拯救我的文档在,不想去公共文件夹,怎么可以添加在左侧的窗口的方法保存一般的文件夹,如下:打开Excel 2007,在办公室的左上角点击按钮,选择保存为命令,在弹出的另存为;;选择文件夹窗口,然后选择右键,在…

绘图软件如何将文本添加到指定的位

绘图软件如何将文本添加到指定的位

位置,文本,如何将,绘图软件,电脑软件,问:我要处理一些图片,主要是添加的图像内容的描述,文本必须被添加到指定的位置和面积。Windows的画图软件,可以添加文字,但不能指定显示区域的大小,和矩形块,总是需要显示的图片我想显示在指定的地区应该如何…