Html5新特性用canvas标签画多条直线附效果截图


Posted in HTML / CSS onJune 30, 2014

下面例子为用canvas标签画多条直线

复制代码
代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index_three</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/index.js"/></script>
<body >
<!-- 添加canvas标签,并加上红色边框以便于在页面上查看 -->
<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
您的浏览器不支持canvas标签。
</canvas>
<script type="text/javascript">
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
//简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){
//获取对应的CanvasRenderingContext2D对象(画笔)
var ctx = canvas.getContext("2d");
//线条的颜色
ctx.strokeStyle="#FF9933";
//线条的宽度像素
ctx.lineWidth=10;
//线条的两关形状
ctx.lineCap="round";
//注意,Canvas的坐标系是:Canvas画布的左上角为原点(0,0),向右为横坐标,向下为纵坐标,单位是像素(px)。
//开始一个新的绘制路径
ctx.beginPath();
//定义直线的起点坐标为(10,10)
ctx.moveTo(50, 50);
//定义直线的终点坐标为(50,10)
ctx.lineTo(350, 250);
ctx.moveTo(50, 240);
ctx.lineTo(360, 60);
ctx.moveTo(50, 200);
ctx.lineTo(300, 40);
//沿着坐标点顺序的路径绘制直线
ctx.stroke();
//关闭当前的绘制路径
ctx.closePath();
}
</script>
</body>
</html>

Html5新特性用canvas标签画多条直线附效果截图
HTML / CSS 相关文章推荐
css3制作彩色边线3d立体按钮的示例(css3按钮)
May 06 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
利用CSS3实现折角效果实例源码
Sep 28 HTML / CSS
解决margin 外边距合并问题
Jul 03 HTML / CSS
移动端适配 使px自动转换rem
Aug 26 HTML / CSS
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
Jun 02 HTML / CSS
如何使用html5与css3完成google涂鸦动画
Dec 16 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
Jun 16 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
Aug 01 HTML / CSS
如何避免常见的6种HTML5错误用法
Nov 06 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
Jan 31 HTML / CSS
CSS3实现360度循环旋转功能
Feb 12 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
Jun 23 #HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
Jun 23 #HTML / CSS
HTML5 在canvas中绘制矩形附效果图
Jun 23 #HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 #HTML / CSS
HTML5 在canvas中绘制文本附效果图
Jun 23 #HTML / CSS
HTML5使用drawImage()方法绘制图像
Jun 23 #HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 #HTML / CSS
You might like
PHP连接access数据库
2015/03/27 PHP
php+curl 发送图片处理代码分享
2015/07/09 PHP
php str_replace替换指定次数的方法详解
2017/05/05 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
判断iframe里的页面是否加载完成
2014/06/06 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
Javascript之Math对象详解
2016/06/07 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
js操作二进制数据方法
2018/03/03 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
Python yield 小结和实例
2014/04/25 Python
举例详解Python中yield生成器的用法
2015/08/05 Python
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
Python输出带颜色的字符串实例
2017/10/10 Python
python机器学习之KNN分类算法
2018/08/29 Python
Python+OpenCV感兴趣区域ROI提取方法
2019/01/10 Python
python tkinter组件摆放方式详解
2019/09/16 Python
python实现树的深度优先遍历与广度优先遍历详解
2019/10/26 Python
python 读取.nii格式图像实例
2020/07/01 Python
如何用Anaconda搭建虚拟环境并创建Django项目
2020/08/02 Python
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
Merchant 1948澳大利亚:新西兰领先的鞋类和靴子供应商
2018/03/24 全球购物
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
项目管理计划书
2014/01/09 职场文书
关于元旦的广播稿
2014/02/16 职场文书
洗发水广告词
2014/03/13 职场文书
2014年教师党员自我评议
2014/09/19 职场文书