读书笔记：基本Canvas绘图_绘图读书笔记-优快云博客

本文链接：https://blog.youkuaiyun.com/fighting_0808/article/details/83828603

js书：javaScript&JQuery:TheMissing Manual
Canvas:https://www.cnblogs.com/boliang/p/4773206.html

canvas模板
<!DOCTYPE html >
<html lang="en" >
<head >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
canvas{
border:1px #000000 dashed;
}
</style>
<title>Canvas</title>
</head>

画直线
三个步骤：1.使用moveTo(),方法找到直线起点；
2.再使用lineTo()方法找到终点；
3再调用stroke()方法绘制；
其他属性:lineWidth(设置线条宽度);strokeStyle（设置线条颜色:用颜色码/或rgb(int x,int y, int z)函数;）;lineCap（设置线条两端形状：round(圆头)；square/butt(方头)）；
直线的样式应该在绘制前设置；
context.beginPath();每次重新绘制都开始一个新的线段绘制；
eg:
<script>
window.οnlοad=function(){
var canvas=document.getElementById("drawing");
var context=canvas.getContext("2d");
//绘图代码

context.moveTo(10,50);
context.lineTo(800,450);
context.lineWidth=10;
context.lineCap="butt";
context.strokeStyle="rgb(205,40,40)";
context.stroke();

context.beginPath();
context.moveTo( 1140,30);
context.lineTo(170,100);
context.lineWidth=17;
context.lineCap="round";
context.strokStyle="#cd2825";
context.stroke();

};
路径与形状
路径：不使用新的路径，以原来的终点做为新的起点；
如果形成一个闭合的空间，填充图像：先调用closePath()来关闭路径，再调用fill()来填充 context.fillStyle="yellow";//设置填充的颜色；
eg:
<script>
window.οnlοad=function(){
var canvas=document.getElementById("drawing");
var context=canvas.getContext("2d");
//绘图代码
context.moveTo(250,50);//起点
context.lineTo(50,250);//终点和起点
context.lineTo(650,250);
context.lineTo(250,50);

context.lineWidth=4;
context.strokeStyle="blue";
context.stroke();

};
</script>

绘制矩形
context.fillStyle="yellow";
context.fillRect(0,10,200,300);
context.stroke();

绘制曲线
四个方法：arc();artTo();bezierCurverTo();
quadraticCurveTo();
arc()方法：绘制圆形,不能绘制椭圆（起点为0，半圆为1，终点为2）
1.确定圆心坐标；
2.确定半径；
3.圆弧的起点角度（用弧度表示1pi半圆，2pi整个圆）；
4.圆弧的终点角度；
eg:
<script>
window.οnlοad=function(){
var canvas=document.getElementById("drawing");
var context=canvas.getContext("2d");
//绘图代码
var centerX=550;
var centerY=300;
var radius= 200;
var starting=0*Math.PI;
var ending=2*Math.PI;
context.arc(centerX,centerY,radius,starting,ending);
context.stroke();
};
</script>
2.
http://tinyurl.com/html5bezier
http://tinyurl.com/html5quadratic
artTo();bezierCurverTo();quadraticCurveTo();方法
控制点：可以改变图像弧度的点
1起点坐标
2.两个控制点的X和Y
3.终点的X和Y

变换
<script>
window.οnlοad=function(){
var canvas=document.getElementById("drawing");
var context=canvas.getContext("2d");
//绘图代码
context.rect(0,0,30,30);
   context.rect(50,50,30,30);
    context.rect(100,100,30,30);
context.rect(150,150,30,30);
context.stroke();
};
</script>
移动坐标
<script>
window.οnlοad=function(){
var canvas=document.getElementById("drawing");
var context=canvas.getContext("2d");
//绘图代码
context.rect(0,0,30,30);
context.translate(50,50);
context.rect(0,0,30,30);
   context.translate(50,50);
context.rect(0,0,30,30);
   context.translate(50,50);
context.rect(0,0,30,30);

context.stroke();
};
</script>
透明度
方法1：使用rgba()函数;接受4个参数：红，绿，蓝颜色分量（0-255）和颜色的不透明度值（用0-1之间的值表示，0完全不可见；1完全不透明）；
<script>
window.οnlοad=function(){
var canvas=document.getElementById("drawing");
var context=canvas.getContext("2d");
//绘图代码
context.fillStyle="rgb(100,150,185)";
context.lineWidth=2;
context.strokeStyle="red";

context.arc(110,120,100,0,2*Math.PI);
context.fill();
context.stroke();

context.beginPath();
context.fillStyle="rgba(100,150,185,0.3)";

context.moveTo(215,50);
context.lineTo(15,250);
context.lineTo(315,250);
context.closePath();
context.fill();
context.stroke();
};
</script>
方法2:
设置上下文的globalAlpha属性；
再设置颜色的透明度
context.globalAlpha=0.5;
context.fillStyle="rgba(100,150,185)";
构建基本的画图程序
http://www.prosetech.com/html5/