HTML5入门九---Canvas画布
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title></title>
- <style>
- canvas{
- border: 1px dashed black;
- }
- </style>
- <script>
- window.onload = function(){
- var canvas = document.getElementById("myCanvas");
- var context = canvas.getContext("2d");
- context.translate(100,100);//平移
- var cop = 10;//试着减小或增大cop的值观察图案变化
- for(var i = 1; i<cop; i++){
- context.rotate(2*Math.PI*1/(cop-1));//旋转
- context.rect(0,0,60,60);//画矩形
- }
- context.strokeStyle = "red";
- context.stroke();
- }
- </script>
- </head>
- <body>
- <canvas id="myCanvas" width="300" height="200">
- </canvas>
- </body>
- </html>
HTML5入门九---Canvas画布的更多相关文章
- HTML5入门十一---Canvas画布实现画图(二)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- HTML5入门十---Canvas画布实现画图(一)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- HTML5 中的 canvas 画布(一)
---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...
- HTML5 中的 canvas 画布(二)
绘制图片 一.绘制图片 context.drawImage()(即把图片放到canvas里) var image = new Image(); // 先创建图片对象 image.src = '图片的 ...
- 用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- 自学HTML5第四节(canvas画布详解)
canvas画布好像可是说是HTML5的精华了,一定要学好,嗯嗯,绚丽的东西就要从基础的开始.... 先看看啥玩意叫做canvas 什么是 Canvas? HTML5 的 canvas 元素使用 Ja ...
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
- HTML5入门以及新标签
HTML5 学习总结(一)--HTML5入门与新增标签 目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 ...
- 推荐10个适合初学者的 HTML5 入门教程
HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...
随机推荐
- dedecms 分页样式
<div class="dede_pages"> <ul class="pagelist"> {dede:pagelist lis ...
- Translation002—Package Index(Android包索引)
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 看本翻译前请您注意: 本人初学android,可能有的翻译不是非常准确,但本人尽最大努力,不清楚处会做标记,并附 ...
- 植物大战僵尸中文第二版和年度版 游戏分析及delphi源码
00413184 |. E8 77E30100 |CALL PlantsVs.00431500 ; 地上的物品00413189 |. 8D7424 10 ...
- DataSnap数据库连接池,数据集对象池的应用
传统的应用服务器的开发往往是在ServerMethods单元中拖放一堆TDataSet, TDaTaSetProvider控件,这是一个最简单粗暴的开发方向,往往会造成服务端程序文件的臃肿.服务运行期 ...
- oracle创建用户,修改用户,删除用户等关于用户的
--直接修改底层表 USER$ 更换用户名 1.windows 平台下运行 cmd 2.sqlplus /nolog 3.SQL> conn SYSTEM/123@ORCL as sysdba ...
- hexo-github 博客搭建
安装nodejs 从官网下载系统对应的源码 wget -qO- https://raw.githubusercontent.com/creationix/nvm/master/install.sh | ...
- (转) linux目录结构详细介绍
转自:http://yangrong.blog.51cto.com/6945369/1288072 目录 1.树状目录结构图 2./目录 3./etc/目录 4./usr/目录 5./var/目录 6 ...
- vs2010旗舰版后,运行调试一个项目时调试不了,提示的是:无法使用“pc”附加到应用程序“webdev.webserver40.exe(PID:2260”
具体问题描述: vs2010旗舰版后,运行调试一个项目时调试不了,能编译,按ctrl+f5 可以运行,但是就是调试就不行,提示的是:无法使用“pc”附加到应用程序“webdev.webserver40 ...
- get的四种请求形式
$_GET变量当用户以get方式请求页面并发送数据的时候,$_GET变量就存储了这些数据——get数据!get请求有4种形式:形式1:<form action=”abc.php” meth ...
- 对象图 Object Diagram
一.用一张图来介绍一下对象图的基本内容 二.对象图与类图的基本区别 三.对象图实例