HTML5 Canvas 画图入门
HTML5 Canvas 画图入门
HTML5 Canvas 画图入门，仅供学习參考
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 移动Web开发指南</title>
<style type="text/css">
h1, h5
{
text-align: center;
}
canvas
{
float: left;
margin: 10px;
overflow: hidden;
}
</style>
<script type="text/javascript" language="javascript">
window.onload = function () {
drawCanvas(0, 0, "canvase_01", "red", 200, 200);
drawCanvas(0, 0, "canvase_02", "green", 200, 100);
drawCanvas(0, 0, "canvase_05", "blank", 300, 60);
drawCanvas(75, 60, "canvase_05", "gray", 150, 90);
drawCanvas(0, 0, "canvase_06", "blank", 300, 50);
drawCanvas(0, 50, "canvase_06", "red", 300, 50);
drawCanvas(0, 100, "canvase_06", "#F8CB1C", 300, 50);
drawCanvas(0, 0, "canvase_07", "green", 100, 150);
drawCanvas(100, 0, "canvase_07", "white", 100, 150);
drawCanvas(200, 0, "canvase_07", "red", 100, 150);
drawRound("canvase_03", "blue", 75, true);
drawRound("canvase_04", "yellow", 75, false);
drawRound("canvase_08", "red", 75, true);
drawRound("canvase_08", "yellow", 75, false);
};
/*
* Canvas 画非圆图形測试
* x: 图形的X轴開始坐标
* y: 图形的Y轴開始坐标
* id： 元素id
* bgColor: 填充的背景颜色
* width: 宽
* height: 高
*/
function drawCanvas(x, y, id, bgColor, width, height) {
var canvas = document.getElementById(id);
if (canvas != null && canvas != undefined) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = bgColor;
//第一个和第二个參数，代表開始坐标
//第三个參数是图形的宽
//第四个參数是图形的高
ctx.fillRect(Number(x), Number(y), Number(width), Number(height));
}
}
/*
* Canvas 画圆測试
* id： 元素id
* bgColor: 填充的背景颜色
* R： 圆半径
* IsRound: 是否为正圆(true正圆、false 半圆)
*/
function drawRound(id, bgColor, R, IsRound) {
var canvas = document.getElementById(id);
if (canvas != null && canvas != undefined) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = bgColor;
ctx.beginPath();
var round = Math.PI;
if (Boolean(IsRound))
round = Math.PI * 2;
//第一个和第二个參数。代表圆心坐标
//第三个參数是圆的半径
//第四个參数代表圆周起始位置(0 起始位置。沿顺时针路线，各自是0.5 (正下方)。1 PI和1.5 PI(正上方)。为画饼图提供了扇形范围的根据)
//第五个參数是弧长(Math.PI*1 半圆、Math.PI*2就是整个圆)
ctx.arc(150, 75, Number(R), 0, round, true);
ctx.closePath();
ctx.fill();
}
}
</script>
</head>
<body>
<header>
<section>
<h1>
HTML5 移动Web开发指南</h1>
</section>
</header>
<fieldset>
<legend>HTML5 新元素--Canvas画图元素</legend>
<article>
<section>
<canvas id="canvase_01">
您的浏览器不支持Canvas元素！
</canvas>
<canvas id="canvase_02">
您的浏览器不支持Canvas元素！
</canvas>
<canvas id="canvase_03">
您的浏览器不支持Canvas元素！
</canvas>
<canvas id="canvase_04">
您的浏览器不支持Canvas元素！
</canvas>
<canvas id="canvase_05">
您的浏览器不支持Canvas元素。
</canvas>
<canvas id="canvase_06">
您的浏览器不支持Canvas元素！
</canvas>
<canvas id="canvase_07">
您的浏览器不支持Canvas元素！
</canvas>
<canvas id="canvase_08">
您的浏览器不支持Canvas元素！
</canvas>
</section>
</article>
</fieldset>
<footer>
<section>
<h5>
<span style="font-family: Arial, Helvetica, sans-serif;">HTML5 新元素--Canvas画图元素</span>
</h5>
</section>
</footer>
</body>
</html>
效果图：
HTML5 Canvas 画图入门的更多相关文章
- html5 Canvas画图3：1px线条模糊问题
点击查看原文地址: html5 Canvas画图3:1px线条模糊问题 本文属于<html5 Canvas画图系列教程> 接上一篇canvas画线条教程 上次我们讲到,canvas有时候会 ...
- html5 canvas 画图移动端出现锯齿毛边的解决方法
使用HTML5的canvas元素画出来的.在移动端手机上测试都发现画图有一点锯齿问题 出现这个问题的原因应该是手机的宽是720像素的, 而这个canvas是按照小于720像素画出来的, 所以在720像 ...
- HTML5 canvas画图
HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript).不过,<canvas> 元素本身并没有绘制能力(它仅仅是 ...
- HTML5 Canvas画图与动画学习59例
HTML5 Canvas画图与动画学习59例 学习HTML5 动画,画图的好资料. HTML5 Canvas画图与动画学习59例
- HTML5 Canvas 画图组件 All In One
HTML5 Canvas 画图组件 All In One Canvas SVG Canvas + SVG refs https://www.infoq.cn/article/1BVg9VDSmqyHv ...
- html5 canvas画图之图形随拖动而复制（有操作指示）
学习html5 canvas,写了一个小练习来加深理解,可以实现图形随拖动而复制. <!DOCTYPE html> <html> <head> <meta c ...
- jTopo HTML5 Canvas 画图组件
jTopo是什么? jTopo(Javascript Topology library)是一款完全基于HTML5 Canvas的关系.拓扑图形化界面开发工具包. jTopo关注于数据的图形展示,它是面 ...
- 玩转html5<canvas>画图
导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制 ...
- HTML5 Canvas——基础入门
认识canvas html5的新标签 <canvas>标签只是图像容器,必须使用js来绘制图形 可以通过多种方法使用canvas绘制路径,盒,圆,字符以及添加图像 canvas画布 < ...
随机推荐
- 语音按钮功能之UIButton的UIControlEventTouchUpInside没有执行问题
新版本im功能开发过程中,遇到个奇葩的问题. 就是点击语音按钮,点击一下松开,不执行UIControlEventTouchUpInside的方法.所以导致一直在录音 但是长按2秒以上,是可以执行UIC ...
- Java 基础【01】 This 用法
业精于勤,荒于嬉:行成于思,毁于随.——韩愈 用类名定义一个变量的时候,定义的只是一个引用,外面可以通过这个引用来访问这个类里面的属性和方法. 那们类里面是够也应该有一个引用来访问自己的属性和方法纳? ...
- 快速掌握RabbitMQ(五)——搭建高可用的RabbitMQ集群
RabbitMQ的集群是依赖erlang集群的,而erlang集群是通过.erlang.cookie文件进行通信认证的,所以我们使用RabbitMQ集群时只需要配置一下.erlang.cookie文件 ...
- Classical method of machine learning
PCA principal components analysis kmeans bayes spectral clustering svm EM hidden Markov models deep ...
- 分享Kali Linux 2017年第12周镜像文件
分享Kali Linux 2017年第12周镜像文件 Kali Linux官方于3月19日发布2017年的第12周镜像.这次维持了11个镜像文件的规模.默认的Gnome桌面的4个镜像,E17.KDE. ...
- 第1章 Spring Cloud 构建微服务架构（一）服务注册与发现
一.Spring Cloud 简介 Spring Cloud是一个基于Spring Boot实现的云应用开发工具,它为基于JVM的云应用开发中的配置管理.服务发现.断路器.智能路由.微代理.控制总 ...
- javascript --- 临时构造器F()
这篇内容也是之前讲到过的,纯属无聊,莫要见怪.~(-￣▽￣)-~(-￣▽￣)-~(-￣▽￣)-~(-￣▽￣)-~(-￣▽￣)- 正如上文所说,如果所有的prototype属性都指向了一个相同的对象,父 ...
- 从零开始开发iPhone，教你如何在真机调试iPhone应用程序
对于真机调试,首先要在苹果网站上注册APP ID,以及购买iPhone Develop Program(iDP) 开发者授权,99美元.然后要创建证书请求CSR,创建步骤如下:设置OCSP和CRL为关 ...
- python得到最长递增子串长度及起始位置【转】
def incSeq(seq): start = 0 for i in xrange(1, len(seq)): if seq[i] < seq[i-1]: yield start, i - s ...
- python 列表结构更新的奇妙问题
使用python + plt 画图遇到了一个奇怪的问题 应该出来的是这样: 结果做出来以后是这样: 为什么画到一起了...... 这个锅python列表背 a=[1,2]b=a 这样 改变b ,a ...