小强的HTML5移动开发之路（6）—

在前面提到Canvas是HTML5中一个重要特点，canvas功能非常强大,用photoshop可以实现的效果canvas也同样可以实现，下面我们用canvas实现基本图形的绘制。

一、Canvas标签的使用

<!DOCTYPE html>
<html><head><meta charset="utf-8"></head><body><canvas id="1" width="200" height="200" style="border:1px solid red"></canvas></body>
</html>

可以看到Canvas就像一块画布，我们可以在这个画布上面绘制我们需要的图形。canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。

二、画矩形

<!DOCTYPE html>
<html><head><meta charset="utf-8"></head><body><canvas id="1" width="500" height="500" style="border:1px solid red" οnmοusemοve="mousexy(envent)"></canvas></body><script type="text/javascript">var c=document.getElementById('1');var p=c.getContext("2d");//getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。p.fillStyle="#FF0000";p.fillRect(0, 0, 300, 300);p.fillStyle="rgba(0,0,255,0.5)";p.fillRect(200,200,500,500);</script>
</html>

三、画线条

<!DOCTYPE html>
<html><head><meta charset="utf-8"></head><body><canvas id="1" width="200" height="200" style="border:1px solid red" οnmοusemοve="mousexy(envent)"></canvas></body><script type="text/javascript">var c=document.getElementById('1');var p=c.getContext("2d");p.moveTo(10,10);p.lineTo(150,50);p.lineTo(10,50);p.stroke();</script>
</html>

四、画圆形

<!DOCTYPE html>
<html><head><meta charset="utf-8"></head><body><canvas id="1" width="200" height="200" style="border:1px solid red" οnmοusemοve="mousexy(envent)"></canvas></body><script type="text/javascript">var c=document.getElementById('1');var p=c.getContext("2d");p.fillStyle="#FF0000";p.beginPath();p.arc(80,80,15,0,Math.PI*2,true);p.closePath();p.fill();</script>
</html>

五、渐变

<!DOCTYPE html>
<html><head><meta charset="utf-8"></head><body><canvas id="1" width="200" height="200" style="border:1px solid red" οnmοusemοve="mousexy(envent)"></canvas></body><script type="text/javascript">var c=document.getElementById("1");var cxt=c.getContext("2d");var grd=cxt.createLinearGradient(0,0,175,50);grd.addColorStop(0,"#FF0000");grd.addColorStop(1,"#00FF00");cxt.fillStyle=grd;cxt.fillRect(0,0,175,50);</script>
</html>

六、绘制图片

<!DOCTYPE HTML>
<html>
<body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas><script type="text/javascript">var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="/i/eg_flower.png"
cxt.drawImage(img,0,0);</script></body>
</html>

七、多边形

<!DOCTYPE html>
<html><head><meta charset="utf-8"></head><body><canvas id="1" width="200" height="200" style="border:1px solid red" οnmοusemοve="mousexy(envent)"></canvas></body><script type="text/javascript">var c=document.getElementById('1');var p=c.getContext("2d");p.fillStyle="#FF0000";p.moveTo(10,10);p.lineTo(150,50);p.lineTo(10,50);p.lineTo(20,30);p.fill();</script>
</html>

转载于:https://www.cnblogs.com/lanzhi/p/6469400.html

小强的HTML5移动开发之路（6）——Canvas图形绘制基础相关推荐

小强的HTML5移动开发之路（18）——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
小强的HTML5移动开发之路（14）——Video标签详解
来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...
h5builder php,小强的HTML5移动开发之路（49）——HTML5开发神器HBuilder
今天给大家介绍一款开发HTML5的神器--HBuilder. 下载地址:http://www.php.cn/ 一.新建文件可以看到支持web app开发和普通网站前端开发,我们首先建立一个移动App ...
小强的HTML5移动开发之路（51）——jquerymobile中改善页面访问速度
在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版,在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求,用户会感到略有停顿.使用多页模版,可以改善页面跳转之间的 ...
小强的HTML5移动开发之路（50）——jquerymobile页面初始化过程
为了方便说明和更加直观的展示jquerymobile的页面初始化过程以及各个事件的触发过程,我绘制了一幅流程图: 图中用红色框圈起来的是界面中的事件,測试代码例如以下: <!DOCTYPE ht ...
小强的HTML5移动开发之路（5）——制作一个漂亮的视频播放器
在前面几篇文章中介绍了HTML5的特点和需要掌握的基础知识,下面我们开始真正的体验一下HTML5的优势,我们开始制作一个漂亮的视频播放器吧先别急,在开始制作之前先了解一下视频文件的基本知识. 一.视频 ...
小强的HTML5移动开发之路（10）——在线画板
在这一篇文章中我们用html5来实现一个在线的画板,玩过你画我猜的朋友今天也可以做一个简单的你画我猜小游戏啦,效果如下图所示: 过程很简单直接上代码了: <!DOCTYPE html PUBLI ...
小强的HTML5移动开发之路（43）——JqueryMobile页眉、工具栏和标签栏导航
一.页眉 1.添加页眉和页脚 <div data-role="header"><h1>第 1 页</h1></div> <di ...
小强的HTML5移动开发之路（27）—— JavaScript回顾2
Javascript面向对象基础知识 1.如何定义一个类,使用如下语法来创建一个类 function Person(name, age){ //习惯上第一个字母大写//this修饰的变量称为属性thi ...

小强的HTML5移动开发之路（6）——Canvas图形绘制基础

小强的HTML5移动开发之路（6）——Canvas图形绘制基础相关推荐

最新文章

热门文章