热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

HTML5交互动画开发历次作业

PleaseCallMeLeiFeng!!!1.用canvas画个笑脸<!DOCTYPEhtmlPUBLIC-W3CDTDXHTML1.0Trans

Please Call Me LeiFeng!!!

1.用canvas画个笑脸这里写图片描述

"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml">

"Content-Type" cOntent="text/html; charset=utf-8" />



<body align="center">
"myCanvas" hljs-string">"600" hljs-string">"600" hljs-string">"border:solid">

body>

2.用canvas画太极图,对老师提供的做了翻转操作
这里写图片描述


<html>
<head>
    <title>作业太极图title>
    <meta charset="utf-8">
head>
<body>
<canvas id="myCanvas" height="400" style="border:1px solid; background:#E1E1FF;">
canvas>
<script type="text/Javascript"> var canvas = document.getElementById("myCanvas"); var cOntext= canvas.getContext("2d"); context.beginPath(); context.arc(200,200,80,1.5*Math.PI,Math.PI/2,false); context.fillhljs-string">"white"; context.closePath(); context.fill(); context.beginPath(); context.arc(200,200,80,Math.PI/2,1.5*Math.PI,false); context.fillhljs-string">"black"; context.closePath(); context.fill(); context.beginPath(); context.arc(200,240,40,0,Math.PI*2,true); context.fillhljs-string">"black"; context.closePath(); context.fill(); context.beginPath(); context.arc(200,160,40,0,Math.PI*2,true); context.fillhljs-string">"white"; context.closePath(); context.fill(); context.beginPath(); context.arc(200,160,5,0,Math.PI*2,true); context.fillhljs-string">"black"; context.closePath(); context.fill(); context.beginPath(); context.arc(200,240,5,0,Math.PI*2,true); context.fillhljs-string">"white"; context.closePath(); context.fill(); script>
body>
html>

这里写图片描述


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>第三周太极图作业title>
head>

<body>
<canvas id="myCanvas" height="400" style="border:1px solid; background:#EEE9E9;">
    你的浏览器不支持canvas画布元素,请更新浏览器获得演示效果。
canvas>
<script type="text/Javascript"> var canvas = document.getElementById("myCanvas"); var cOntext= canvas.getContext("2d"); //白色上半圆的代码如下: context.beginPath(); context.arc(200,200,80,0,Math.PI,true); context.fillhljs-string">"white"; context.strokehljs-string">"white"; context.fill(); //黑色下半圆的代码如下: context.beginPath(); context.arc(200,200,80,0,Math.PI,false); context.fillhljs-string">"#000000"; context.strokehljs-string">"black"; context.fill(); //绘制黑色小圆  context.beginPath(); context.arc(160,200,40,0,Math.PI*2,true); context.fillhljs-string">"black"; context.closePath(); context.fill(); //绘制白色小圆  context.beginPath(); context.arc(240,200,40,0,Math.PI*2,true); context.fillhljs-string">"white"; context.strokehljs-string">"white"; context.closePath(); context.fill(); context.stroke(); //绘制白色小圆心  context.beginPath(); context.arc(160,200,5,0,Math.PI*2,true); context.fillhljs-string">"white"; context.closePath(); context.fill(); //绘制黑色小圆心  context.beginPath(); context.arc(240,200,5,0,Math.PI*2,true); context.fillhljs-string">"black"; context.closePath(); context.fill(); script>
body>
html>

3.自己任意画个图
这里写图片描述

"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml">

"Content-Type" cOntent="text/html; charset=utf-8" />



<body>

矩形加赛贝尔曲线

"myCanvas"hljs-string">"400" hljs-string">"400" hljs-string">"border:1px solid; background:#EEE9E9;"> 你的浏览器不支持canvas画布元素,请更新浏览器获得演示效果。 body>

4.渐变和阴影效果的使用(在第二周作业基础上的)
这里写图片描述

"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml">

"Content-Type" cOntent="text/html; charset=utf-8" />




矩形加赛贝尔曲线

"myCanvas"hljs-string">"400" hljs-string">"400" hljs-string">"border:1px solid; background:#EEE9E9;"> 你的浏览器不支持canvas画布元素,请更新浏览器获得演示效果。 "myCanvas2"hljs-string">"400" hljs-string">"400" hljs-string">"border:1px solid; background:#EEE9E9;"> 你的浏览器不支持canvas画布元素,请更新浏览器获得演示效果。

推荐阅读
author-avatar
johnnyLei
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有