整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
SS的强大和精妙，只有在认真研读其代码之后才会深刻明白。
今日继续用纯CSS画图，并给大家整理了本文中所有代码，需要的小伙伴可以私信我哦。
首先，用CSS画一个阴阳图，如下：
代码也很简单：
#yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}
当然，颜色什么的，可以随便改啦~
再画一个可爱的鸡蛋~~~像这样：
代码仅仅几句话：
#egg {
display:block;
width: 126px;
height: 180px;
background-color: red;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
长这样：
代码非常非常少：
#moon {
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: 15px 15px 0 0 red;
}
是不是很神奇？不敢相信这几句代码居然有这样的功力？
那就打开电脑，按照我之前讲的方法创建一个html试试吧~
不知道怎么创建的小伙伴看这里>>css3制作图形大全：简单几句代码画出漂亮的图形，一起来看看吧~
于学习js是为爬虫服务，所以canvas绘图学习并不完整。
HTML文件中需要有canvas元素，两标签之间的文字是浏览器不支持时显示的。
<canvas id="drawing" width="200" height="200">A drawing of something.</canvas>要在网页中显示canvas绘制的图像，只需要在画布上绘制图形即可：
var drawing = document.getElementById("drawing");
if (drawing.getContext){
var context = drawing.getContext("2d");
context.fillStyle = "#0000ff";
context.fillRect(10,10,50,50);
context.fillStyle = "rgba(0,0,255,0.5)";
context.fillRect(30,30,50,50);
}
也可以通过toDataURL输出到图像，并创建新的img：
var drawing = document.getElementById("drawing");
// 取得图像的数据URI
var imgURI = drawing.toDataURL("image/png");
// 显示图像
var image = document.createElement("img");
image.src = imgURI;
document.body.appendChild(image);可通过strokeStyle和fillStyle属性进行设置
var context = drawing.getContext("2d");
context.strokeStyle = "red";
context.fillStyle = "#0000ff";设置属性有以下几种：
"red"
"#0000ff"
"rgba(0,0,255,0.5)"
context.strokeStyle = "red";绘制矩形有fillRect（带有填充）、strokeRect（无填充）、clearRect（除清矩形区域）三个方法，单位为像素：
var drawing = document.getElementById("drawing");
if (drawing.getContext){
var context = drawing.getContext("2d");
// 红色的矩形
context.fillStyle = "#ff0000";
context.fillRect(10,10,50,50);
// 半透明的矩形
context.fillStyle = "rgba(0,0,255,0.5)";
context.fillRect(30,30,50,50);
}以beginPath()方法开始，然后接着绘制以下线条：
路径创建完以后，有多种结尾方式：
方法：
fillText()
strokeText()属性：
font
textAlign start、end、left、right、center
textBaseline top、hanging、middle、alphabetic、ideographic、bottom
周在给学生讲授JavaScript课程中setInterval方法时，想到了我们在网上看到的各类GIF动图比较有意思，就将其引入到教学中，教学内容设计如果通过HTML5与JavaScript实现网页类似GIF效果的动态图。于是在网上搜集了部分gif格式动图，将每一个Gif动图分解为一组jpg格式图片，再采用setInterval与html5 Canvas进行动画的实现。通过学习可以让学生进一步了解canvas动画实现的过程与原理。并将其发布到头条，也希望对有兴趣的初学者了解HTML5 Canvas等有所帮助。图片分组图片素材如下：
素材一
实现动画的素材我们已经给出，主要通过gif动图导出一组图片，下面对html5动画实现过程进行简单说明。
实现其动画的基本思路是通过HTML5提供的canvas元素进行图片的绘制与展示，借助setInterval方法实现间隔指定时间调用新的图片实现重新绘图。其中绘图主要使用drawImage方法进行绘图，最终通过图片依次重绘实现动画效果。具体实现过程如下：
在页面body部分添加Canva标签，设置其id属性为canv，宽度为600，高度为400,编写代码描述如下图：
添加画布元素
canvas浏览效果
使用Canvas借助JavaScript提供的drawImage方法进行绘图，需要提供要绘制的图片资源即绘图的坐标位置。该方法原型如下：
drawImage方法原型
因此我们需要加载图片资源，本例由于需要调用多个img实现定时不同图片的绘制，因此我们可以使用数组存储所加载的图片资源。本例图片数量为14，因此我们数组长度为14。使用素组存储图片实现代码如下：
加载图片资源代码
本例设计在页面加载时自动播放动画，因此需要在JavaScript脚本中添加页面onload事件，在事件中编写绘图相关代码，主要代码包括获取画布canva与实例化绘图对象context。部分代码描述如下：
onload事件及绘图初始化
使用setInterval方法实现动画主要需要定义回调函数与回调函数触发执行的周期，本例中我们使用匿名函数作为回调函数，触发周期设置为100毫秒。setInterval函数定义如下：
setInterval函数
在定义完函数之后可在其匿名函数函数体部分写入绘图方法dramImage(),实现周期调用不同图片资源进行绘图，最终展示出动画效果。为了保证循环调用14张图片，我们需要设置一计数全局变量i，由于我们图片采用数组存储，下标为数组，且从0-13进行编号，因此当计数值小于13时自动+1，指向下一数组下标，当为13时，设置计数值为0，回到数组第一元素，最终实现数组访问下标的循环。setInterval实现完整代码如下：
setInterval完整代码
HTML动画效果展示
本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可以联系作者，共同探讨。期待大家关注！如需案例完整代码请关注并私信，往期前端设计文章链接如下：
*请认真填写需求信息，我们会在24小时内与您取得联系。
