[js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API
我们接着上文[js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法继续.
一、直线的绘制
cxt.moveTo( x1, y1 )： 将画笔移动到x1, y1这个点
cxt.lineTo( x2, y2 )：将画笔从起点开始画直线，一直画到终点坐标( x2, y2 )
cxt.stroke();用画笔连线，moveTo,lineTo并不会产生实际的线条
x1,y1,x2,y2是点的坐标，canvas的坐标原点在canvas的左上角.
画一根直线:
<style>
body {
background:#000;
}
#canvas {
background:white;
}
</style>
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' );
oGc.moveTo( 50, 50 );
oGc.lineTo( 250, 50 );
oGc.stroke();
}
</script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
如果把stroke注释了，是不会出现线条的，stoke的作用就是用来将点连起来
通过2个实例来区分，moveTo与lineTo的区别
<style>
body {
background:#000;
}
#canvas {
background:white;
}
</style>
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' );
oGc.moveTo( 50, 50 );
oGc.lineTo( 250, 50 );
oGc.moveTo( 50, 200 );
oGc.lineTo( 250, 200 );
oGc.stroke(); oGc.moveTo( 300, 50 );
oGc.lineTo( 500, 50 );
oGc.lineTo( 300, 200 );
oGc.lineTo( 500, 200 );
oGc.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
</body>
左右两边的线形图，代码就一点区别，左边图形是第二个点用了lineTo, 第三个点用了moveTo, 右边图形第二个点用了lineTo，第三个点还是lineTo，从图中你应该能感受到这两个方法的区别吧？
画三角形
<style>
body {
background:#000;
}
#canvas {
background:white;
}
</style>
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' ); oGc.moveTo( 50, 50 );
oGc.lineTo( 450, 50 );
oGc.lineTo( 450, 300 );
oGc.lineTo( 50, 50 );
oGc.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
</body>
把上面的代码，稍微修改下，就能画出一个矩形了
<style>
body {
background:#000;
}
#canvas {
background:white;
}
</style>
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' ); oGc.moveTo( 50, 50 );
oGc.lineTo( 450, 50 );
oGc.lineTo( 450, 300 );
oGc.lineTo( 50, 300 );
oGc.lineTo( 50, 50 );
oGc.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
</body>
二，canvas提供了画矩形的API
通过线条我们也能拼接出一个矩形，但是代码太多，每个点都要把握，显得比较麻烦，canvas为我们提供了画矩形的API，有两种，一种是描边矩形，一种是填充矩形.
cxt.strokeStyle = 属性值
cxt.strokeRect( x, y, width, height )
strokeStyle后面的属性是为了修饰线条的，主要包括( 颜色值，渐变色，图案 ），颜色支持英文单词，十六进制，RGB, RGBA格式的颜色设置.
strokeRect: x, y为矩形的左上角坐标，width和height为矩形的宽度和高度
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' ); oGc.strokeStyle = '#09f';
oGc.strokeRect( 50, 50, 500, 300 );
}
</script>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
</body>
填充矩形API
cxt.fillStyle = 属性值;
cxt.fillRect( x, y, width, height );
跟上面是一样的，只是把stoke换成了fill，fill就是填充的意思
画一个带有透明度的矩形：
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' ); oGc.fillStyle = 'rgba( 255, 0, 0, 0.3 )';
oGc.fillRect( 50, 50, 500, 300 );
}
</script>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
</body>
另一种绘制矩形的API：cxt.rect( x, y, width, height );
他与strokeRect和fillRect有什么区别呢？
1，共同点：参数的意思相同
2，不同点，调用strokeRect和fillRect会立即绘制出矩形，而rect并不会，他需要调用stoke()或者fill()方法，才能把矩形绘制出来
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' ); oGc.fillStyle = 'rgba( 255, 0, 0, 0.3 )';
oGc.rect( 50, 50, 500, 300 );
// oGc.stroke();
oGc.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
</body>
清空矩形API：cxt.clearRect( x, y, width, height ); 参数跟strokeRect,fillRect意思一样
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' ); oGc.fillStyle = 'rgba( 255, 0, 0, 0.3 )';
oGc.fillRect( 50, 50, 500, 300 ); oGc.clearRect( 100, 100, 200, 200 );
}
</script>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
</body>
用fillRect和clearRect画一个加号，当然你可以用moveTo和lineTo,不过代码应该比这种方法多了不少.
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' ); oGc.fillStyle = 'rgba( 255, 0, 0, 0.3 )';
oGc.fillRect( 100, 100, 200, 200 );
oGc.clearRect( 100, 100, 50, 50 );
oGc.clearRect( 250, 100, 50, 50 );
oGc.clearRect( 250, 250, 50, 50 );
oGc.clearRect( 100, 250, 50, 50 );
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
</body>
绘制一个调色板：
<style>
body {
background:#000;
}
#canvas {
background:white;
}
</style>
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' ),
aColor = [ '00', '33', '66', '99', 'cc', 'ff' ],
aMiddle = [ 'ff', 'cc', '99', '66', '33', '00' ], count = 0;
for( var i = 0; i < 12; i++ ){
for( var j = 0; j < 18; j++ ){
count++;
if ( i < 6 && count < 6 && j < 6 )
oGc.fillStyle = `#${aColor[i]}${aMiddle[0]}${aColor[j]}`;
else if( i < 6 && count < 12 && j < 12 )
oGc.fillStyle = `#${aColor[i]}${aMiddle[1]}${aColor[j-6]}`;
else if ( i < 6 && count < 18 && j < 18 )
oGc.fillStyle = `#${aColor[i]}${aMiddle[2]}${aColor[j-12]}`;
else if ( count < 6 && j < 6 )
oGc.fillStyle = `#${aColor[i-6]}${aMiddle[3]}${aColor[j]}`;
else if ( count < 12 && j < 12 )
oGc.fillStyle = `#${aColor[i-6]}${aMiddle[4]}${aColor[j-6]}`;
else if ( count < 18 && j < 18 )
oGc.fillStyle = `#${aColor[i-6]}${aMiddle[5]}${aColor[j-12]}`;
oGc.fillRect( j * 40, i * 40, 40, 40 );
}
count = 0;
}
}
</script>
</head>
<body>
<canvas id="canvas" width="720" height="720"></canvas>
</body>
javascript原生实现调色板：
var aColor = [ '00', '33', '66', '99', 'cc', 'ff' ],
aMiddle = [ 'ff', 'cc', '99', '66', '33','00' ]; document.write( "<table>" );
for( var i = 0; i < 12; i++ ){
document.write( "<tr>" );
for( var j = 0 ; j < 18; j++ ) {
if ( i < 6 && j < 6 ) //前6行,左6列
document.write( "<td style='background-color:#" + aColor[i]+ aMiddle[0] + aColor[j] + "'> </td>" );
else if ( i < 6 && j < 12 ){ //前6行 中间6列
document.write( "<td style='background-color:#" + aColor[i]+ aMiddle[1] + aColor[j-6] + "'> </td>" );
}else if ( i < 6 && j < 18 ){ //前6行, 后面6列
document.write( "<td style='background-color:#" + aColor[i]+ aMiddle[2] + aColor[j-12] + "'> </td>" );
}else if ( i < 12 && j < 6 ){ //后6行, 左6列
document.write( "<td style='background-color:#" + aColor[i-6]+ aMiddle[3] + aColor[j] + "'> </td>" );
}else if ( i < 12 && j < 12 ){ //后6行, 中6列
document.write( "<td style='background-color:#" + aColor[i-6]+ aMiddle[4] + aColor[j-6] + "'> </td>" );
}else if ( i < 12 && j < 18 ){ //后6行, 后6列
document.write( "<td style='background-color:#" + aColor[i-6]+ aMiddle[5] + aColor[j-12] + "'> </td>" );
}
}
document.write( "</tr>" );
}
document.write( "</table>" );
[js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API的更多相关文章
- [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)
之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...
- [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)
绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...
- [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)
接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...
- [js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)
接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...
- [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)
上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...
- [js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)
接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现 ...
- [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)
本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...
- [js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置
接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear ...
- [js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法
canvas是html5中引入的一个新元素,俗称画布,既然是画布,当然是用来画图的.canvas技术指的是利用javascript操作canvas元素绘制图形的技术,要使用canvas,一定要浏览器支 ...
随机推荐
- RDMA调研报告&一点随笔
计算所科研实践随笔 被淹没在论文海里的两个星期. 早上7:10分起床,草草洗漱,7:30出发,开始漫长的1小时通勤.从地铁站的安检口起,队便排的极长,让人看得头皮发麻.下到了轨道旁稍好,但每趟呼啸而来 ...
- jQuery遍历-同胞
同胞拥有相同的父元素. 通过 jQuery,您能够在 DOM 树中遍历元素的同胞元素. 在 DOM 树中水平遍历 有许多有用的方法让我们在 DOM 树进行水平遍历: siblings() next() ...
- MyBatis框架知识整理
MyBatis框架 一.介绍: MyBatis实际上是Ibatis3.0版本以后的持久化层框架[也就是和数据库打交道的框架]! 和数据库打交道的技术有: 原生的JDBC技术---> Spring ...
- 多路复用（select、epoll）实现tcp服务
-------------------------------多路复用的服务器(select)------------------------------- 网络通信被Unix系统抽象为文件的读写,通 ...
- 《Java从入门到放弃》JavaSE入门篇：面向对象语法二(入门版)
想了半天,发现单独的封装和多态没什么好讲的,我们就简单说说Java里面对应的语法吧. 相关内容如下: 一.访问修饰符 二.getter/setter方法 三.构造方法 四.super和this 五.s ...
- eval浅解
关于eval,你了解多少呢?来看看 eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码. 需要一个参数(string),切必需.要计算的字符串,其中含有要计算的 JavaS ...
- ASP.NET Core的身份认证框架IdentityServer4（8）- 使用密码认证方式控制API访问
前言 本文及IdentityServer这个系列使用的都是基于.net core 2.0的.上一篇博文在API项目中我使用了icrosoft.AspNetCore.Authentication.Jwt ...
- WPF-TreeView获取文件夹目录、DataGrid获取目录下文件信息
开发一个WPF桌面应用程序.刚接触WPF编程以及C#语言,这里把一些关键的问题记录下来. 下面是实现将路径的文件夹信息绑定到TreeView及DataGrid上显示. 关键问题是C#数据绑定方式及IE ...
- 转：【Java并发编程】之十二：线程间通信中notifyAll造成的早期通知问题（含代码）
转载请注明出处:http://blog.csdn.net/ns_code/article/details/17229601 如果线程在等待时接到通知,但线程等待的条件还不满足,此时,线程接到的就是早期 ...
- K好数--蓝桥杯
JAVA版K好数--蓝桥杯 历经千辛万苦,也算是研究出来了这道题了. 这道题主要运用了动态规划(Dynamic Planning)的思想,何谓动态规划?其实就是将一个大问题分成一个个小问题,然后先通过 ...