-
lineJoin:miter(default) bevel round miterLimit默认10查看全部
-
<!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>查看全部 -
径向渐变 createRadialGradient(x1,y1,r1,x2,y2,r2); addColorStop(stop,color)查看全部
-
获取位置、处理事件的函数查看全部
-
canvas 基于状态设置 再绘制的过程查看全部
-
canvas图形库查看全部
-
canvas标准查看全部
-
Canvas绘图详解 9-3 扩展Canvas的context 向context中添加自己设置的绘制函数（重看） 覆盖原有的Canvas API方法查看全部
-
Canvas绘图详解 4-4 深入理解图形变换（transform） ctx.setTransform：忽略掉之前所有的transform，将直接让之前所有的transform失效，只使用当前的setTransform中所传入的变换矩阵 两个设置变换矩阵的函数：transform（a,b,c,d,e,f） setTransform（a,b,c,d,e,f）查看全部
-
Canvas绘图详解 4-3 应用translate rotate和scale 图形变换会使坐标系发生变化 ctx.translate(x,y) ctx.rotate(deg) ctx.scale(sx,sy)查看全部
-
对比吧查看全部
-
太棒了 准备学习呢查看全部
-
源码在哪查看全部
-
对我很有帮助查看全部
举报