一篇代码让你明白高数的重要性·~~·
HTML5 canvas画布笔记
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>画布笔记</title>
</head>
<body>
<canvas width="320" height="180"id="canvas"></canvas>
<script type="text/javascript" language="javascript" charset="utf-8">
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
context.fillStyle="#FF0000";
context.fillRect(0,0,150,75);//左上角开始画150*75的矩形
context.moveTo(10,10);
context.lineTo(150,50);
context.lineTo(10,50);
context.stroke();
context.beginPath();
context.arc(70,18,15,0,2*Math.PI,true);//圆心坐标,半径,开始弧度,结束弧度,逆时针
context.closePath();
context.fill();
var lg=context.createLinearGradient(0,0,175,50);
lg.addColorStop(0,"#FF0000");
lg.addColorStop(1,"#00FF00");
context.fillStyle=lg;
context.fillRect(0,0,175,50);
var img=new Image();
img.src="flower.png";
context.drawImage(img,0,0);
context.fillStyle="rgb(200,0,0)";
context.fillStyle="rgba(200,0,0,0.5)";
context.fillStyle="white";
context.fillRect(x,y,width,height);填充矩形
context.strokeRect(x,y,width,height);矩形框
context.clearRect(x,y,width,height);清除矩形
context.beginPath();
context.closePath();
context.stroke();
context.fill();//当调用fill()时开放的路径会自动闭合而无须调用closePath()
贝塞尔曲线
context.quadraticCurveTo(起点x,起点y,终点x,终点y);//二次的
context.bezierCurveTo(起点1x,起点1y,起点2x,起点2y,终点x,终点y);//三次的
context.rect(x,y,width,height);
context.drawImage(原始图片或画布,目标x,目标y);
context.drawImage(原始图片或画布,目标x,目标y,宽度,高度);
context.drawImage(原始图片或画布,切片x,切片y,切片宽度,切片高度,目标x,目标y,目标宽度,目标高度);
context.fillStyle=颜色;
context.strokeStyle=颜色;
context.globalAlpha=0.2;//透明度
context.lineWidth=正数;//线的粗细
context.lineCap="butt|round|square";//线段端点样式
context.lineJoin="miter|round|bevel";//两线段连接处样式
context.miterLimit=数字;//一般不用
var lg=context.createLinearGradient(x1,y1,x2,y2);//起点坐标与终点坐标
var rg=context.createRadialGradient(x1,y1,r1,x2,y2,r2);//圆心1,半径1,圆心2,半径2
lg|rg.addColorStop(位置,颜色);//位置0.0->1.0
context.fillStyle=lg|rg;
context.strokeStyle=lg|rg;
var cp=context.createPattern(原始图片或画布,"repeat|repeat-x|repeat-y|no-repeat");
context.fillStyle=cp;
context.strokeStyle=cp;
context.shadowOffsetX=浮点数;
context.shadowOffsetY=浮点数;
context.shadowBlur=浮点数;//模糊程度
context.shadowColor=颜色;
context.font="20px 字体";
context.fillText("字符串",5,30);
context.save();//保存当前状态
context.restore();//还原到上一次状态
context.translate(x,y);//改变圆点到(x,y)
context.rotate(弧度);//旋转中心始终是原点，旋转方向是顺时针
context.scale(x,y);//横轴缩放因子,纵轴缩放因子
context.transform(m11,m12,m21,m22,dx,dy);//好好看高数的书
context.setTransform(m11,m12,m21,m22,dx,dy);//好好看高数的书
context.globalCompositeOperation=类型;
source-over新图形会覆盖在原有内容之上
destination-over在原有内容之下绘制新图形
source-in新图形会仅仅出现与原有内容重叠的部分，其它区域都变成透明的
destination-in原有内容中与新图形重叠的部分会被保留，其它区域都变成透明的
source-out只有新图形中与原有内容不重叠的部分会被绘制出来
destination-out原有内容中与新图形不重叠的部分会被保留
source-atop新图形中与原有内容重叠的部分会被绘制，并覆盖于原有内容之上
destination-atop原有内容中与新内容重叠的部分会被保留，并会在原有内容之下绘制新图形
lighter两图形中重叠部分作加色处理
darker两图形中重叠的部分作减色处理
xor重叠的部分会变成透明
copy只有新图形会被保留，其它都被清除掉
context.clip();//相当于遮罩
</script>
</body>
</html>
浙公网安备 33010602011771号