对于HTML5canvas基本绘图之绘制线条感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍htmlcanvas绘图，并为您提供关于Android编程之绘图canvas基本用法示例、canvas
对于HTML5 canvas基本绘图之绘制线条感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍html canvas 绘图，并为您提供关于Android编程之绘图canvas基本用法示例、canvas-nest.js基于html5 canvas绘制的网页背景效果、canvas基本绘制图形、canvas基础入门（二）绘制线条、三角形、七巧板的有用信息。
本文目录一览：- HTML5 canvas基本绘图之绘制线条（html canvas 绘图）
- Android编程之绘图canvas基本用法示例
- canvas-nest.js基于html5 canvas绘制的网页背景效果
- canvas基本绘制图形
- canvas基础入门（二）绘制线条、三角形、七巧板
HTML5 canvas基本绘图之绘制线条（html canvas 绘图）
<canvas></canvas>是HTML5中新增的标签，用于绘制图形，这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之绘制线条方法，感兴趣的小伙伴们可以参考一下<canvas></canvas>是HTML5中新增的标签，用于绘制图形，实际上，这个标签和其他的标签一样，其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象，我们可以通过JavaScript脚本来控制该对象进行绘图。
<canvas></canvas>只是一个绘制图形的容器，除了id、class、style等属性外，还有height和width属性。在<canvas>>元素上绘图主要有三步：
1.获取<canvas>元素对应的DOM对象，这是一个Canvas对象；
2.调用Canvas对象的getContext()方法，得到一个CanvasRenderingContext2D对象；
3.调用CanvasRenderingContext2D对象进行绘图。
线条属性
除了上面用到的linewidth属性，线条还有以下几个属性：
•lineCap 属性设置或返回线条末端线帽的样式，可以取以下几个值：
“butt” 向线条的每个末端添加平直的边缘（默认）；
“round” 向线条的每个末端添加圆形线帽；
“square” 向线条的每个末端添加正方形线帽。
•lineJoin 属性当两条线交汇时设置或返回所创建边角的类型，可以取以下几个值：
“miter” 创建尖角(默认)；
“bevel” 创建斜角；
“round” 创建圆角。
•miterLimit 属性设置或返回最大斜接长度（默认为10）。斜接长度指的是在两条线交汇处内角和外角之间的距离。只有当 lineJoin 属性为 “miter” 时，miterLimit 才有效。
JavaScript Code复制内容到剪贴板
var canvas = document.getElementById(canvas);
var context = canvas.getContext(2d);
//测试lineCap属性
//设置基准线便于观察
context.moveto(10,10);
context.lineto(10,200);
context.moveto(200,10);
context.lineto(200,200);
context.linewidth=1;
context.stroke();
//butt
context.beginPath();
context.moveto(10,50);
context.lineto(200,50);
context.lineCap=butt;
context.linewidth=10;
context.stroke();
//round
context.beginPath();
context.moveto(10,100);
context.lineto(200,100);
context.lineCap=round;
context.linewidth=10;
context.stroke();
//square
context.beginPath();
context.moveto(10,150);
context.lineto(200,150);
context.lineCap=square;
context.linewidth=10;
context.stroke();
//测试linJoin属性
//miter
context.beginPath();
context.moveto(300,50);
context.lineto(450,100);
context.lineto(300,150);
context.lineJoin=miter;
context.linewidth=10;
context.stroke();
//round
context.beginPath();
context.moveto(400,50);
context.lineto(550,100);
context.lineto(400,150);
context.lineJoin=round;
context.linewidth=10;
context.stroke();
//square
context.beginPath();
context.moveto(500,50);
context.lineto(650,100);
context.lineto(500,150);
context.lineJoin=bevel;
context.linewidth=10;
context.stroke();
//测试miterLimit属性
context.beginPath();
context.moveto(700,50);
context.lineto(850,100);
context.lineto(700,150);
context.lineJoin=miter;
context.miterLimit=2;
context.linewidth=10;
context.strokeStyle=#2913EC;
context.stroke();各属性的不同取值的效果如下：
相关推荐：
使用HTML5 Canvas为图片填充颜色和纹理
javascript html5 canvas实现可拖动省份的中国地图
Android编程之绘图canvas基本用法示例
本文实例讲述了Android编程之绘图canvas基本用法。分享给大家供大家参考，具体如下：
MainActivity的代码如下：
package example.com.myapplication;
import android.os.Bundle;
import android.app.Activity;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//实例化GraphicsView
GraphicsView gv = new GraphicsView(this);
/* 在以前我们通过setContentView(R.layout.activity_main)显示布局文件
* 本例中使用GraphicsView对象gv代替以前布局文件
*/
setContentView(gv);
}
}
另一个定义画布画笔的class类
GraphicsView
其代码如下：：
package example.com.myapplication;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Color;
import android.view.View;
public class GraphicsView extends View{
//声明画笔
Paint paint=null;
public GraphicsView(Context context) {
super(context);
/*----------------------------------------------
* 部分书籍中把Paint paint=new Paint();放在onDraw方法中，建议
* 尽量不要把初始化画笔放在onDraw方法中，这是因为：onDraw经常会运行
* 到的，不要在里面new对象，越少越好，不然很浪费内存
*--------------------------------------------*/
//获取画笔，初始化画笔
paint=new Paint();
}
@Override
protected void onDraw(Canvas canvas){
//设置画布背景为白色
canvas.drawColor(Color.WHITE);
//设置画笔为红色
paint.setColor(Color.RED);
//使用当前画笔绘制一个左上角坐标为80,20，右下角坐标为360,180的矩形
canvas.drawRect(80,20,360,180,paint);
//设置画笔为绿色
paint.setColor(Color.GREEN);
//使用当前画笔绘制一个圆心坐标为220,100，半径为60的圆
canvas.drawCircle(220,100,60,paint);
}
}
更多关于Android相关内容感兴趣的读者可查看本站专题：《Android图形与图像处理技巧总结》、《Android开发入门与进阶教程》、《Android调试技巧与常见问题解决方法汇总》、《Android基本组件用法总结》、《Android视图View技巧总结》、《Android布局layout技巧总结》及《Android控件用法总结》
希望本文所述对大家Android程序设计有所帮助。
canvas-nest.js基于html5 canvas绘制的网页背景效果
开源地址
https://github.com/hustcc/canvas-nest.js
下载js地址
http://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js
<body>
<!-- 下面的js必须在body里面引入 color:设置点和线的颜色 count:设置点的个数，count的数量不宜太多，太多会拖慢加载速度 -->
<script type="text/javascript" color="0,209,178" opacity=''0.9'' zIndex="-2" count="300" src="canvas-nest.min.js"></script>
</body>
设置线条的粗细 canvas-nest.min.js的 lineWidth 属性即可
设置线条的颜色 canvas-nest.min.js的 strokeStyle 属性即可
该js只是我在github找到自己用觉得好用，并不是自己写的
canvas基本绘制图形
canvas H5新增的元素，提供了强大的图形的绘制，变换，图片，视频的处理等等。需要使用JavaScript脚本操作
浏览器支持
大多数的现代浏览器都可以支持；IE8以下的浏览器不支持
画布 可支持设置宽高，默认宽高300 150
获取canvas元素
var mycanvas = document.getElementById("myCanvas");
获取绘制环境（相当于画笔）
var context = mycanvas.getContext("2d");
是自带的好h5对象，拥有多种绘制路径，矩形，圆形，文本等方法
绘制线
开始绘制
context.beginPath();
设置起点的坐标
moveTo(x,y)
设置样式(颜色，渐变或模式)
context.stroke;
设置填充颜色
context.fill;
context.fill();
设置线条宽度
context.lineWidth = 5;
设置线条结束端 lineGap
设置拐角类型 lineJoin
context.lineCap = "round";
绘制
context.stroke();
绘制矩形
fillRect() 绘制填充的矩形
strokeRect() 绘制无填充的矩形
阴影颜色 shadowColor
阴影的模糊级别 shadowBlur
阴影的水平偏移量 shadowOffsetX
阴影的垂直偏移量 shadowOffsetY
绘制文字
strokeText() 绘制空心文本
fillText() 绘制实心文本
线性渐变
createLinearGradient(x0,y0,x1,y1)
x0,y0,x1,y1起始位置的坐标和结束位置的坐标
var linear = context.createLinearGradient(100, 350, 400, 450);
addColorStop()
参数1：对应颜色的位置，[0,1]
参数2：对应的颜色（字符串形式）
linear.addColorStop(0, "red");
linear.addColorStop(0.5, "yellow");
linear.addColorStop(1, "blue");
context.fillStyle = linear;
context.fillRect(0, 350, 500, 25);
context.fillRect(0, 0, 500, 500);
径向渐变
context.createRadialGradient(x0,y0,r0,x1,y1,r1)
x0,y0,r0,x1,y1,r1径向渐变的起始位置和结束位置对应的坐标和渐变半径
var grad = context.createRadialGradient(150, 150, 50, 150, 150, 150);
grad.addColorStop(0, "red");
grad.addColorStop(0.5, "yellow");
grad.addColorStop(1, "blue");
context.fillStyle = grad;
context.fillRect(0, 0, 300, 300);
图形变换
平移 旋转 缩放
translate() 平移 重置画布
平移操作只会影响后面图形的位置，是不会影响前面图形的
context.fillStyle = grad;
context.fillRect(300, 300, 100, 100);
context.translate(50, 50);
rotate()旋转
context.rotate(Math.PI / 4);
scale(w,h) 设置x方向和y方向的缩放比。大于1：放大，小于1：缩小
context.scale();
贝塞尔曲线
二次方贝塞尔曲线
context.quadraticCurveTo(cx,cy,x1,y1);
参数：cx,cy 二次方贝塞尔曲线的控制点坐标位置
x1,y1 结束点坐标位置
context.beginPath();
context.moveTo(50, 50);
context.quadraticCurveTo(100, 100, 150, 20);
context.stroke();
三次方贝塞尔曲线
bezierCurveTo(cx1,cy1,cx2,cy2,x,y)
前四个参数：代表两个控制点的坐标位置
后两个参数：代表结束点的坐标位置
canvas基础入门（二）绘制线条、三角形、七巧板
复杂的内容都是有简单的线条结合而成的，想要绘制出复杂好看的内容先从画直线开始
canvas绘制直线先认识几个函数
beginPath()；开始一条路径，或重置当前的路径
moveTo(x,y)；用于规定直线的起点坐标
lineTo(x,y)；用于规定直线的终点坐标
closePath()；方法创建从当前点到开始点的路径
stroke()；方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色
利用上面的函数就可以简单的画出直线了
代码
<canvas id="canvas">当前浏览器不支持canvas，请更换浏览器再试</canvas>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("canvas");
canvas.width = 1024;//设置canvas宽高
canvas.height = 768;
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(100, 100);
context.lineTo(700, 700);
context.closePath();
context.stroke();
}
</script>
接下来个直线添加点样式：
lineWidth；属性设置或返回当前线条的宽度，以像素计
strokeStyle；属性设置或返回用于笔触的颜色、渐变或模式
fillStyle；属性设置或返回用于填充绘画的颜色、渐变或模式
fill()；方法填充当前的图像（路径）。默认颜色是黑色
JavaScript代码如下：
<canvas id="canvas">当前浏览器不支持canvas，请更换浏览器再试</canvas>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("canvas");
canvas.width = 1024;//设置canvas宽高
canvas.height = 768;
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(100, 100);
context.lineTo(700, 700);
context.closePath();
context.lineWidth = 5;
context.strokeStyle = "red";
context.stroke();
}
</script>
会绘制直线后我们接着来绘制一些图像，要绘制图像也是使用lineTo(x,y)，绘制三角形，代码如下
<canvas id="canvas">当前浏览器不支持canvas，请更换浏览器再试</canvas>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("canvas");
canvas.width = 1024;//设置canvas宽高
canvas.height = 768;
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(100, 100);
context.lineTo(700, 700);
context.lineTo(100, 700);
context.lineTo(100, 100);
context.closePath();
context.lineWidth = 5;
context.strokeStyle = "red";
context.stroke();
}
</script>
这个时候在是实现一些复杂的图像，七巧板：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas绘制七巧板</title>
</head>
<body>
<canvas id="canvas">
当前浏览器不支持Canvas，请更换浏览器再试
</canvas>
<script type="text/javascript">
var tangram = [
{p: [{x: 0,y: 0}, {x: 800,y: 0}, {x: 400,y: 400}],color: "#caff76"},
{p: [{x: 0,y: 0}, {x: 400,y: 400}, {x: 0,y: 800}],color: "#67becf"},
{p: [{x: 800,y: 0}, {x: 800,y: 400}, {x: 600,y: 600}, {x: 600,y: 200}],color: "#ef3d61"},
{p: [{x: 600,y: 200}, {x: 600,y: 600}, {x: 400,y: 400}],color: "#f9f51a"},
{p: [{x: 400,y: 400}, {x: 600,y: 600}, {x: 400,y: 800}, {x: 200,y: 600}],color: "#a594c0"},
{p: [{x: 200,y: 600}, {x: 400,y: 800}, {x: 0,y: 800}],color: "#fa8ecc"},
{p: [{x: 800,y: 400}, {x: 800,y: 800}, {x: 400,y: 800}],color: "#f6ca29"},
];
window.onload = function() {
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
var context = canvas.getContext("2d");
for(var i = 0; i < tangram.length; i++) {
draw(tangram[i], context)
}
}
function draw(plece, cxt) {
cxt.beginPath();
cxt.moveTo(plece.p[0].x, plece.p[0].y);
for(var i = 1; i < plece.p.length; i++) {
cxt.lineTo(plece.p[i].x, plece.p[i].y);
}
cxt.closePath();
cxt.fillStyle = plece.color;
cxt.fill();
cxt.strokeStyle = "black";
cxt.lineWidth = 3;
cxt.stroke();
}
</script>
</body>
</html>
今天关于HTML5 canvas基本绘图之绘制线条和html canvas 绘图的讲解已经结束，谢谢您的阅读，如果想了解更多关于Android编程之绘图canvas基本用法示例、canvas-nest.js基于html5 canvas绘制的网页背景效果、canvas基本绘制图形、canvas基础入门（二）绘制线条、三角形、七巧板的相关知识，请在本站搜索。
本文标签：
