Canvas高级
1.基本语法
<script>
var can = document.getElementById("can"),
context = can.getContext("2d");
can.width = 600;
can.height =800;
can.style.border = "1px solid red";
/*cancas是基于状态的绘制的，而不是对某一个线条或者框框设置，是对整个环境的定义*/
/*意思就是说设置绘图状态是会对整个画布都起作用*/
/*划线，先设置状态*/
context.moveTo(100,100);
context.lineTo(600,600);
context.lineWidth = 10;
context.strokeStyle ="#58";
/*绘制*/
context.stroke()
context.moveTo(100,200);
context.lineTo(600,600);
context.lineWidth = 10;
context.strokeStyle ="red";
context.stroke()
/*最后画出来的线条都是最后一次绘制是的状态*/
/*需要绘制不同的状态需要*/
context.beginPath()
context.moveTo(100,300);
context.lineTo(600,600);
context.lineWidth = 20;
context.strokeStyle ="pink";
context.stroke()
/*此时绘制的最后一条线就是粉红色的，宽度是20，前两条是红色的，宽度是10*/
</script>2.封闭区域
<script>
var can = document.getElementById("can"),
context = can.getContext("2d");
can.width = 800;
can.height =800;
can.style.border = "1px solid red";
/*cancas是基于状态的绘制的*/
/*一个箭头的绘制*/
context.beginPath();
context.moveTo(100,300);
context.lineTo(400,300);
context.lineTo(400,200);
context.lineTo(550,350);
context.lineTo(400,500);
context.lineTo(400,400);
context.lineTo(100,400);
context.lineWidth = 10;
context.closePath();
context.fillStyle = "pink";
context.strokeStyle ="#58";
/*填充和描边的顺序不一样结果也不一样，就是描边的宽度*/
context.fill();
context.stroke();
</script>线条属性
/*
1.lineWidth：线宽；
2.lineCap:线头；
round:圆头
square:方头和butt的区别是到终点往前伸半个线宽
butt：（deflaut）
3.lineJoin:定义线段的拐点样式；
miter(default):尖角（注：当设置miter时，会受到miterLimit限制
eg：context.lineJoin = "miter";
context.miterLimit = 10;
drawStar(400,400,300,20,4,"red");/*太尖的时候就受到限制*/）
bevel：顶点是平头
round：拐点是圆头
*/
<script>
var can = document.getElementById("can"),
context = can.getContext("2d");
can.width = 600;
can.height =800;
can.style.border = "1px solid red";
/*cancas是基于状态的绘制的*/
//划线
context.moveTo(100,100);
context.lineTo(600,600);
context.lineWidth = 10;
context.lineCap = "round";
context.strokeStyle ="#58";
context.stroke();
</script>矩形
<script>
var can = document.getElementById("can"),
context = can.getContext("2d");
can.width = 600;
can.height =800;
can.style.border = "1px solid red";
/*cancas是基于状态的绘制的*/
//划线
context.beginPath();
context.moveTo(100,100);
context.lineTo(100,600);
context.lineTo(500,600);
context.lineTo(500,100);
context.lineTo(100,100);
context.lineWidth = 10;
context.strokeStyle ="#580";
context.stroke();
/*矩形绘制函数*/
function drawRect(context，x,y,width,height,linewidth,fillcolor,strokecolor){
context.beginPath();
context.moveTo(x,y);
context.lineTo(x,y+height);
context.lineTo(x+width,y+height);
context.lineTo(x+width,y);
context.closePath();
context.lineWidth = linewidth;
context.strokeStyle =strokecolor;
context.fillStyle =fillcolor;
context.fill();
context.stroke();
}
drawRect(context，200,200,200,200,2,"red","blue")
/*其中颜色可以是css认识的rgb，rgba，hsl，“red”，。。。*/
/*canvas提供的矩形绘制的API*/
context.strokeRect(100,100,200,200)；
context.fillRect(300,300,100,100)
</script>绘制五角星
<script>
var can = document.getElementById("can"),
context = can.getContext("2d");
can.width = 800;
can.height =800;
can.style.border = "1px solid red";
/*cancas是基于状态的绘制的*/
/*五角星*/
context.beginPath();
for(var i = 0;i<5;i++){
context.lineTo(Math.cos((18+i*72)/180*Math.PI)*300 +400,
-Math.sin((18+i*72)/180*Math.PI)*300+400);
context.lineTo(Math.cos((54+i*72)/180*Math.PI)*150 +400,
-Math.sin((54+i*72)/180*Math.PI)*150+400);
}
context.closePath();
context.lineWidth = 2;
context.stroke();
//顺时针rot为正
function drawStar(context,x,y,R,r,rot,linewidth,strokecolor,fillcolor){
fillcolor = fillcolor || "transparent";
context.beginPath();
for(var i = 0;i<5;i++){
context.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R +x,
-Math.sin((18+i*72-rot)/180*Math.PI)*R+y);
context.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r +x,
-Math.sin((54+i*72-rot)/180*Math.PI)*r+y);
}
context.closePath();
context.lineWidth = linewidth;
context.fillStyle = fillcolor;
context.strokeStyle = strokecolor;
context.fill();
context.stroke();
}
drawStar(context,400,400,300,150,30,4,"red");
</script>变换
/*
位移：translate（x，y）
旋转：rotate（deg）
缩放：scale（sx，sy）(缩放会改变边框的粗细)
*/
context.translate(100,100);
context.rotate(30/180*Math.PI);
context.scale(1.5,1);
context.fillRect(300,300,100,100);
/*利用变换改写五角星函数，实现代码的复用*/
<script>
var can = document.getElementById("can"),
context = can.getContext("2d");
can.width = 800;
can.height =800;
can.style.border = "1px solid red";
/*cancas是基于状态的绘制的*/
/*星空*/
context.fillStyle = "black";
context.fillRect(0,0,can.width,can.height);
for(var i =0;i<100;i++){
var x =Math.random()*can.width;
var y = Math.random()*can.width*0.5;
var R = Math.random()*10+10;
var rot= Math.random()*360;
drawStar(context,x,y,rot,R);
}
/*绘制五角星*/
function drawStar(context,x,y,rot,R){
context.save();
context.translate(x,y);
context.rotate(rot/180*Math.PI);
starPath(context,R);
context.lineJoin = "round";
context.strokeStyle ="#fd5";
context.fillStyle ="#fb3";
context.fill();
context.stroke();
context.restore()
}
/*五角星路径*/
function starPath(context,R){
context.beginPath();
for(var i = 0;i<5;i++){
context.lineTo(Math.cos((18+i*72)/180*Math.PI)*R ,
-Math.sin((18+i*72)/180*Math.PI)*R);
context.lineTo(Math.cos((54+i*72)/180*Math.PI)*R*0.5 ,
-Math.sin((54+i*72)/180*Math.PI)*R*0.5);
}
context.closePath();
}
</script>transform
<script>
var can = document.getElementById("can"),
context = can.getContext("2d");
can.width = 600;
can.height =800;
can.style.border = "1px solid red";
/*cancas是基于状态的绘制的*/
/*矩阵
* a c e
* b d f
* 0 0 1
*
* a,d 水平、垂直缩放
* b,c 水平、垂直倾斜
* e f 水平、垂直位移
* */
context.fillStyle ="#580";
context.transform(1,30/180*Math.PI,0,1,100,100);
context.fillRect(0,0,200,200);
context.beginPath();
context.fillStyle ="red";
/*此处重新设置了变换会改变上次设置的transform设置*/
context.setTransform(1,0,0,1,200,200);
context.fillRect(0,0,200,200);
</script>渐变
/*线性渐变*/
<script>
var can = document.getElementById("can"),
context = can.getContext("2d");
can.width = 800;
can.height =800;
can.style.border = "1px solid red";
/*createLinearGradient()可以传入负值*/
var linearGrad = context.createLinearGradient(0,0,0,800);
linearGrad.addColorStop(0,"skyblue");
linearGrad.addColorStop(0.5,"blue");
linearGrad.addColorStop(1,"pink");
context.fillStyle = linearGrad;
context.fillRect(100,100,600,600);
/*径向渐变*/
/*createRadialGradient(中心圆圆心左边的x值，中心圆圆心左边的y值，中心圆半径大小，外圆圆心左边的x值，外圆圆心左边的y值，外圆半径大小)可以传入负值*/
var radialGrad = context.createRadialGradient(400,400,0,400,400,600);
radialGrad .addColorStop(0,"skyblue");
radialGrad .addColorStop(0.5,"blue");
radialGrad .addColorStop(1,"pink");
context.fillStyle = radialGrad ;
</script>
/*图片纹理*/
<script>
var can = document.getElementById("can"),
context = can.getContext("2d");
can.width = 800;
can.height =800;
can.style.border = "1px solid red";
/*context.createPattern(imgSrc,"repeat")，第一个参数可以是图片，也可以是视频，也可以是另一个canvas，,第二个参数可以是repeat，repeat-x...*/
var imgSrc = new Image();
imgSrc.src = "img/point.png";
imgSrc.onload = function(){
var imgG = context.createPattern(imgSrc,"repeat");
context.fillStyle = imgG;
context.fillRect(100,100,600,600);
}
</script>圆弧
/*-------------------------------------------*/
context.strokeStyle = "red" ;
context.lineWidth = 10;
context.beginPath();
/*圆心半径坐标：x，y，半径，起始角度，结束角度，[true/false(表示顺时针还是逆时针)]*/
context.arc(400,400,200,0,Math.PI);
context.stroke();
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017.11.29 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录