-
绘制弧度 角度详解图：
查看全部 -
fillStyle可以赋予的属性值 color, gradient(渐变样式), image, canvas, video
context.createLinearGradient(xstart, ystart, xend, yend)创建线性渐变色
context.createRadialGradient(x0, y0, r0, x1, y1, r1);创建镜像的渐变色
.addColorStop(stop,color)添加关键颜色
createPattern(img/canvas/video , repeat-style)
repeat-style:no-repeat,repeat-x,repeat-y,repeat 需要指定重复样式
创建图片或者另一个canvas作为fill的填充样式
查看全部 -
fillStyle,strokeStyle 只要是css支持的颜色值；就可以 以字符串的形式赋值
查看全部 -
12345
查看全部 -
save() 保存
restore() 恢复当前canvas绘图的状态
translate(x,y)位移操作
rotate(deg)旋转操作
scale(sx,sy)缩放操作
transform(a, b, c, d, e, f)图形变换矩阵
setTransform(a, b, c, d, e, f)设置当前状态
详细请学习图形学知识
查看全部 -
lineWidth 设置线条粗细
lineCap = “butt”/“round”/“square” 设置线条帽子 默认/圆形/方形
lineJoin = “miter”/“bevel”/“round” 设置线条相接处 默认尖头/斜接/圆头
miterLimit设置miter的上限
基于圆形来寻找多边形顶点的坐标从而进行绘制
查看全部 -
lineJoin
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图形变换和状态保存</title>
</head>
<body>
<canvas id="canvas" ></canvas>
<script type="text/javascript">
/*
*位移：translate（x,y）
*旋转: rotate(deg)
*缩放: scale(sx,sy)
*/
window.onload=function(){
var c=document.getElementById("canvas");
c.width=1024;
c.height=800;
var context=c.getContext("2d");
context.fillStyle="red";
context.translate(100,100);//状态位移
context.fillRect(0,0,400,400);
context.restore();//状态恢复
context.save();//状态保存
context.fillStyle="green";
context.translate(300,300);
context.fillRect(0,0,400,400);
context.restore();
}
</script>
</body>
</html>查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas" ></canvas>
<script type="text/javascript">
window.onload=function(){
var c=document.getElementById("canvas");
c.width=800;
c.height=800;
var context=c.getContext("2d");
//调用函数
drawStar(context,200,300,400,400,15);
}
//封装一个绘制五角星的函数
/*参数说明
* ctx:为canvas上下文环境变量
* r:小圆半径
* R；大圆半径
* x,y:为五角心中心坐标
* rot:旋转角度
*/
function drawStar(ctx,r,R,x,y,rot){
ctx.beginPath();
for(var i=0;i<5;i++){
ctx.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,//角度转换为弧度
-Math.sin((18+i*72-rot)/180*Math.PI)*R+y);
ctx.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,
-Math.sin((54+i*72-rot)/180*Math.PI)*r+y);
}
ctx.closePath();
ctx.lineWidth=10;
ctx.stroke();
}
</script>
</body>
</html>查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>lineCap</title>
</head>
<body>
<canvas id="canvas" ></canvas>
<script type="text/javascript">
window.onload=function(){
var c=document.getElementById("canvas");
c.width=800;
c.height=500;
var ctx=c.getContext("2d");
//使用canvas绘图
/*
*lineCap属性
* 属性值：
* butt(default)
* round:会突出一个圆形的头
* square：会突出一个方形的头
*/
ctx.lineWidth=10;
ctx.strokeStyle="#058";
ctx.beginPath();
ctx.moveTo(100,100);//定义线条开始坐标
ctx.lineTo(200,100)//线条结束坐标
ctx.lineCap="butt";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100,200);//定义线条开始坐标
ctx.lineTo(200,200)//线条结束坐标
ctx.lineCap="round";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100,300);//定义线条开始坐标
ctx.lineTo(200,300)//线条结束坐标
ctx.lineCap="square";
ctx.stroke();
}
</script>
</body>
</html>查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>矩形</title>
</head>
<body>
<canvas id="canvas" ></canvas>
<script type="text/javascript">
window.onload=function(){
var c=document.getElementById("canvas");
c.width=1024;
c.height=500;
var context=c.getContext("2d");
drawRect(context,100,100,200,200,10,"#058","red");
drawRect2(context,200,200,200,200,10,"#058","rgba(0,256,0,0.5)");
}
function drawRect(ctx,x,y,width,height,borderWidth,borderColor,fillColor){
ctx.beginPath();//开始绘制新路径
ctx.rect(x,y,width,height);//矩形绘制，省去了路径绘制
ctx.closePath();//结束路径，具有自动补全的作用
ctx.lineWidth=borderWidth;//描边的粗细
ctx.fillStyle=fillColor;//所要填充的颜色
ctx.strokeStyle=borderColor;//描边的颜色
ctx.fill();//填充颜色，要先填充再描边，这样描边的颜色就不会被填充的颜色所覆盖；
ctx.stroke();//描边
}
function drawRect2(ctx,x,y,width,height,borderWidth,borderColor,fillColor){
ctx.beginPath();//开始绘制新路径
ctx.rect(x,y,width,height);
ctx.closePath();//结束路径，具有自动补全的作用
ctx.lineWidth=borderWidth;//描边的粗细
ctx.fillStyle=fillColor;//所要填充的颜色
ctx.strokeStyle=borderColor;//描边的颜色
ctx.fillRect(x,y,width,height);//
ctx.strokeRect(x,y,width,height);
}
</script>
</body>
</html>查看全部 -
canvas是基于状态的
查看全部 -
获取位置、处理事件的函数查看全部
-
// 任意正多边形 function drawSimplePolygon(ctx, opts) { var R = +opts.R || 200, r = +opts.r || 100, c = +opts.count >= 3 ? +opts.count : 5, x = +opts.x || 0, y = +opts.y || 0, rotate = +opts.rotate || 0, borderWidth = +opts.borderWidth || 4, borderStyle = opts.borderStyle || '#000', styles = opts.styles || '#fff'; var radian = Math.PI / 180; var c_ang = 360 / c, out_ang = 90 - c_ang, in_ang = 90 - (90 - out_ang) / 2; ctx.beginPath(); ctx.strokeStyle = borderStyle; ctx.lineWidth = borderWidth; ctx.fillStyle = styles; for (var i = 0; i < c; i++) { var x1 = Math.cos((out_ang + i * c_ang - rotate) * radian) * R + x; var y1 = -Math.sin((out_ang + i * c_ang - rotate) * radian) * R + y; var x2 = Math.cos((in_ang + i * c_ang - rotate) * radian) * r + x; var y2 = -Math.sin((in_ang + i * c_ang - rotate) * radian) * r + y; ctx.lineTo(x1, y1); ctx.lineTo(x2, y2); } ctx.closePath(); ctx.fill(); ctx.stroke();}查看全部
-
`lineCap = 'square'` 可以用作封闭图形线框，但是不推荐使用；推荐使用 `ctx.closePath()`方法。查看全部
举报