html5——canvas画直线
<html>
<head>
<title>canvas demo</title>
</head>
<body>
<canvas id="mycanvas" width="500px" height="500px" ></canvas>
<script type="text/javascript">
var mycanvas = document.getElementById("mycanvas");
var mycontext = mycanvas.getContext("2d"); mycontext.beginPath();
mycontext.strokeStyle = "red";
mycontext.moveTo(70, 140);
mycontext.lineTo(140, 70);
mycontext.lineTo(300,200);
mycontext.lineWidth="5";
mycontext.stroke(); mycontext.beginPath();
mycontext.strokeStyle = "blue";
mycontext.moveTo(200, 200);
mycontext.lineTo(400, 500);
mycontext.stroke();
</script>
<style>
#mycanvas{
border: solid 1px;
}
</style> </body>
</html>
效果图
beginPath()
刷新(开始)画图的开头
moveTo()
开始点
lineto()
记录点,可以多个
stroke()
绘制从beginPath()开始设置的定义图形
html5——canvas画直线的更多相关文章
- HTML5 Canvas 画虚线组件
前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js if (window.CanvasRendering ...
- HTML5 Canvas 画钟表
画钟表是2D画图的老生常谈,我也不能免俗弄了一个.代码如下: <!DOCTYPE html> <html lang="utf-8"> <meta ht ...
- CSS3进度条 和 HTML5 Canvas画圆环
看到一些高大上的进度条插件,然后想自己用CSS写.经过搜索资料之后,终于成功了.为了以后方便拿来用,或者复习.将代码贴出. HTML代码: 只需要两个div,外面的为一个有border的div id为 ...
- html5 canvas画饼
1. [图片] lxdpie.jpg 2. [文件] lqdpie.html ~ 801B 下载(7) <!DOCTYPE HTML PUBLIC "-//W3C//DTD ...
- html5 canvas画不出图像的原因
很久没写博客了,今年过年的时候,家里出了意外,现在心里依然很难受.6月份之前一直忙着写毕业论文,答辩完6月初回公司继续上班,今天刚好周末有空,就写下之前碰到一个问题. 做一个图像查看器(基于Chrom ...
- html5 canvas画流程图
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- HTML5 Canvas画数字时钟
先不说废话,没代码算个蛋. 一些地方注释都写得比较清楚,不过这只是部分,因为只有秒针,但是时针,分针的逻辑都是一致的. 代码中有些坐标不知道为什么较不准,看看就好
- html5 canvas画进度条
这个ie8的兼容是个问题,ie8 的innerHTML有问题啊,添加两个附件吧 <!DOCTYPE html> <html> <head> <meta cha ...
- html5 canvas 画hello ketty
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
随机推荐
- 移动端a标签点击图片有阴影处理
移动端我们在点击页面中的一些图片的时候会出现阴影.处理方法只要给a标签加上 a { -webkit-tap-highlight-color: transparent; -webkit-touch-ca ...
- ecshop订单-》待付款,待发货,待收货,收货确认
// 订单 待付款.待发货.待收货.确认收货 public function get_serch_order($type/*,$limit_statrt,$limit_end,$serch*/){ $ ...
- SCI/EI期刊投稿 Reply Letter 常用格式总结
SCI/EI期刊投稿Reply Letter常用格式总结 整个论文投稿的过程中,会遇到各种问题,需要我们向主编询问或是回复.下面主要总结了responses to the comme ...
- C# Monitoring-network
http://www.codeproject.com/Articles/6259/Monitoring-network-speed
- ngrok内网穿透利器在windws下的使用
1.到官网下载windows版本:https://ngrok.com/download 2.解压,双击“ngrok.exe” 3.输入“ngrok http 80”,会随机给你分配域名.见下图. ng ...
- tomcat启动异常(严重: Dispatcher initialization failed Unable to load configuration. - [unknown location] )
严重: Dispatcher initialization failed Unable to load configuration. - [unknown location] at com.opens ...
- Linux平台延时之sleep、usleep、nanosleep、select比较
Linux平台延时之sleep.usleep.nanosleep.select比较 标签: 嵌入式thread线程cpu多线程 2015-05-05 15:28 369人阅读 评论(0) 收藏 举报 ...
- 【9-7】XML学习笔记01
Tips XML标签大小写敏感: XML文件一般使用国际化通用的编码“utf-8”,所以平时看到的XML文件的头部都会有这样的代码: <?xml version="1.0" ...
- Win8/Win10无法打开这个应用 内置管理员账户
现在装win10系统的同伴越来越多了,相比于win7,win10在某些设置方面也有些变化,比如我们在使用win8或者win10时,会碰到如图所示的对话框: Windows10/Windows8无法使用 ...
- move_upload_file 因为文件字符集编码iconv引起的问题
对 包含中文的文件 进行操作时提示 Invalid argument? 包括: 这里的move_uploaded_file和 fopen等操作都是如此. 而且用了字符编码转换后, iconv('utf ...