canvas 画布基础
学习整理的笔记，内容丰富
有绘制矩形，绘制线条，绘制二次贝塞尔曲线，绘制弧线等。知识点在代码注释中
效果图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas 教程</title>
<style>
canvas{background: #F9F9F9;border:1px solid #000;}
.one,.two,.thr,.four{float:left;margin-left: 200px;}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" ></script>
<script>
$(function(){
// 创建2d的画图环境
var canvas_2d = document.getElementById("canvas-test").getContext("2d");
// fillRect() 绘制“被填充”的矩形 / 前两个数是坐标，后两个是像素大小
canvas_2d.fillRect(0,0,100,100);
// strokeRect() 绘制矩形（无填充）
canvas_2d.strokeRect(100,0,100,100);
// fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
canvas_2d.fillStyle = "rgba(0,0,0,0.8)";
// strokeStyle 设置或返回用于笔触的颜色、渐变或模式
canvas_2d.strokeStyle = "cadetblue";
// shadowColor 设置或返回用于阴影的颜色
canvas_2d.shadowColor = "rgba(3,3,3,0.6)"
// shadowBlur 设置或返回用于阴影的模糊级别
canvas_2d.shadowBlur = 10;
// shadowOffsetX 设置或返回阴影距形状的水平距离
canvas_2d.shadowOffsetX = 4;
// shadowOffsetY 设置或返回阴影距形状的垂直距离
canvas_2d.shadowOffsetY = 4;
canvas_2d.fillRect(200,0,100,100);
canvas_2d.strokeRect(300,0,100,100);
// createLinearGradient() 创建线性渐变。前两个是渐变起点坐标，后两个便是结束坐标
var linearGradient = canvas_2d.createLinearGradient(100,100,100,200);
// addColorStop() 规定渐变对象中的颜色和停止位置
linearGradient.addColorStop(0,"#000");
linearGradient.addColorStop(1,"#eee");
canvas_2d.fillStyle = linearGradient;
canvas_2d.fillRect(100,100,100,100);
// createRadialGradient() 创建放射状/环形的渐变。每三个为一组，前两个是坐标后一个是半径
var radialGradient = canvas_2d.createRadialGradient(350,150,40,350,150,80);
radialGradient.addColorStop(0,"#eee");
radialGradient.addColorStop(1,"#000");
canvas_2d.fillStyle = radialGradient;
canvas_2d.fillRect(300,100,100,100);
// createPattern() 在指定的方向上重复指定的元素这个我就不试了
/*---------------------one-----------分割线------------two-----------------------*/
var $canvas_line = document.getElementById("canvas-line");
var canvas_2d_line = $canvas_line.getContext("2d");
$canvas_line.οnmοusedοwn=function (e) {
var startx=e.layerX;
var starty=e.layerY;
// moveTo(x,y) 开始绘制一条直线，指定线条的起点
canvas_2d_line.moveTo(startx,starty);
$canvas_line.οnmοusemοve=function (e) {
var endx=e.layerX;
var endy=e.layerY;
// lineTo(x1,y1) 指定直线要到达的位置
canvas_2d_line.lineTo(endx,endy);
// stroke() 绘制路径
canvas_2d_line.stroke();
}
$canvas_line.οnmοuseup=function () {
$canvas_line.οnmοusemοve=null;
$canvas_line.οnmοuseup=null;
}
}
/*
lineCap 设置或返回线条的结束端点样式
butt:向线条的每个末端添加平直的边缘 缺省
round:向线条的每个末端添加圆形线帽。
square:向线条的每个末端添加正方形线帽，效果不明显
lineJoin 设置或返回两条线相交时，所创建的拐角类型
miter:创建尖角; 缺省
bevel:创建斜角。
round:创建圆角。
lineWidth 设置或返回当前的线条宽度
number:当前线条的宽度，以像素计
miterLimit 设置或返回最大斜接长度
number:正数。规定最大斜接长度.5
斜接长度指的是在两条线交汇处内角和外角之间的距离
只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效
*/
canvas_2d_line.lineWidth=10;
canvas_2d_line.lineCap="round";
canvas_2d_line.moveTo(10,10);
canvas_2d_line.lineTo(150,10);
canvas_2d_line.stroke();
/*------------------two--------------分割线---------------thr--------------------*/
// beginPath()：开始一条路径，或重置当前的路径。
// closePath()：创建从当前点到开始点的路径，关闭当前的绘图路径
var canvas_radial=document.getElementById("canvas-radial");
var canvas_2d_radial=canvas_radial.getContext("2d");
// 绘制二次贝塞尔曲线 三部曲 quadraticCurveTo 前两个是贝塞尔左边，后两个是结束坐标
//canvas_2d_radial.moveTo(50,100);
//canvas_2d_radial.quadraticCurveTo(200,200,300,100);
//canvas_2d_radial.stroke();
canvas_radial.οnmοusedοwn=function (e) {
var startx=e.layerX;
var starty=e.layerY;
canvas_radial.οnmοuseup=function (e) {
var endx=e.layerX;
var endy=e.layerY;
canvas_radial.οnmοusemοve=function (e) {
canvas_2d_radial.clearRect(0,0,400,400);
var conx=e.layerX;
var cony=e.layerY;
canvas_2d_radial.beginPath();
canvas_2d_radial.moveTo(startx,starty);
canvas_2d_radial.quadraticCurveTo(conx,cony,endx,endy);
canvas_2d_radial.stroke();
}
}
}
// arc(x坐标,y坐标,r半径,开始角度,结束角度,false逆时针/true顺时针);创建弧/曲线（用于创建圆或部分圆)
var canvas_2d_arc=canvas_radial.getContext("2d");
canvas_2d_arc.arc(100,100,30,0,Math.PI/2,false);
canvas_2d_arc.stroke();
/*------------------thr--------------分割线---------------four--------------------*/
var canvas=document.getElementById("canvas-is-path");
var canvas_2d_is_path=canvas.getContext("2d");
canvas_2d_is_path.arc(200,200,50,0,2*Math.PI);
canvas_2d_is_path.stroke();
var angle=0;
canvas.οnclick=function (e) {
var mx=e.layerX;
var my=e.layerY;
// isPointInPath(x,y) 返回 true，说明指定的点位于当前路径中,反之不在
if(canvas_2d_is_path.isPointInPath(mx,my)){
setInterval(function () {
// 清除画布 和 beginPath();连用
canvas_2d_is_path.clearRect(0,0,400,400);
angle+=0.2;
canvas_2d_is_path.beginPath();
canvas_2d_is_path.arc(200,200,50+10*Math.sin(angle),0,2*Math.PI);
canvas_2d_is_path.stroke();
},50);
}
}
});
</script>
</head>
<body>
<section class="one">
<hgroup>
<h2>canvas 教程</h2>
<h3>画矩形</h3>
</hgroup>
<canvas width="400" height="400" id="canvas-test">
您需要更新浏览器呢 凸^-^凸
</canvas>
</section>
<section class="two">
<hgroup>
<h2>canvas 教程</h2>
<h3>点击开始画线 / 路径(线条)修饰</h3>
</hgroup>
<canvas width="400" height="400" id="canvas-line">
您需要更新浏览器呢 凸^-^凸
</canvas>
</section>
<section class="thr">
<hgroup>
<h2>canvas 教程</h2>
<h3>绘制二次贝塞尔曲线(点击鼠标滑动) / 绘制弧线</h3>
</hgroup>
<canvas width="400" height="400" id="canvas-radial">
您需要更新浏览器呢 凸^-^凸
</canvas>
</section>
<section class="four">
<hgroup>
<h2>canvas 教程</h2>
<h3>脉动 （点击圆内）</h3>
</hgroup>
<canvas width="400" height="400" id="canvas-is-path">
您需要更新浏览器呢 凸^-^凸
</canvas>
</section>
</body>
</html>
个人主页：http://www.itit123.cn/ 更多干货等你来拿
1036
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
