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 允许你创建响应性.创新性.互动性以及令人惊叹的 ...
随机推荐
- 用“逐步排除”的方法定位Java服务线上“系统性”故障（转）
一.摘要 由于硬件问题.系统资源紧缺或者程序本身的BUG,Java服务在线上不可避免地会出现一些“系统性”故障,比如:服务性能明显下降.部分(或所 有)接口超时或卡死等.其中部分故障隐藏颇深,对运维和 ...
- Winfrom 抓取web页面内容代码
WebRequest request = WebRequest.Create("http://1.bjapp.sinaapp.com/play.php?a=" + PageUrl) ...
- MinGW-64 安装
一.在mingw-w64官网下载mingw-w64在线安装包 二.点击mingw-w64进行安装,选择: Version:选最新版本 我这个是4.9.2 Architecture:x86_64 (64 ...
- 菜鸟学习Struts——简易计算器
这是学习Struts的一个简单的例子文件结构如下: 1.配置Struts环境 2.新建input.jsp,success.jsp,error.jsp input.jsp代码如下: <%@ pag ...
- linux总线、设备和设备驱动的关系
之一:bus_type 总线是处理器和一个或多个设备之间的通道,在设备模型中,所有的设备都通过总线相连,甚至是内部的虚拟"platform"总线.可以通过ls -l /sys/bu ...
- 腾讯WEB前端开发三轮面试经历及面试题
[一面]~=110分钟 2013/04/24 11:20 星期三 进门静坐30分钟做题. 填空题+大题+问答题 >>填空题何时接触电脑 何时接触前端运算符 字符串处理 延 ...
- iOS下日期的处理(世界标准时转本地时间)
NSDate存储的是世界标准时(UTC),输出时需要根据时区转换为本地时间 Dates NSDate类提供了创建date,比较date以及计算两个date之间间隔的功能.Date对象是 ...
- 深入mysql_fetch_row()与mysql_fetch_array()的区别详解
这两个函数,返回的都是一个数组,区别就是第一个函数返回的数组是只包含值,我们只能$row[0],$row[1],这样以数组下标来读取数据,而mysql_fetch_array()返回的数组既包含第一种 ...
- php 安全处理方案
Safe::mysqlSafe(); sql注入,升级5.3.6以上版本php 方案一:将所有请求中所有数据(get/post/cookie)实现mysql_escape_string进行安全处理. ...
- mac 搭建git服务器
一.简单搭建,不提供复杂的权限管理: 远程建立git用户,并打开ssh服务:见http://www.cnblogs.com/whj198579/archive/2013/04/09/3009350 ...