07、canvas标签之canvas变换

来源：互联网发布：科技网络报修电话编辑：程序博客网时间：2024/05/23 18:00

canvas变换

.translate(x,y) 坐标基准点偏移 : 从起始点为基准，移动到当前位置
.rotate(弧度):旋转弧度公式：角度*PI/180
.scale(wb,hb)缩放比例(缩放canvas绘制的图片)

<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title><style>#canvas{background:#b086a3;}</style></head><body><canvas id='canvas' width='500px' height='500px'>您的浏览器不支持，请更新浏览器!</canvas><script>/*设置绘图样式：fillStyle: 填充颜色strokeStyle: 触笔颜色lineWidth: 触笔宽度(线宽)图形边界样式：lineJoin : 边界连接点样式miter(默认值),round(圆角),bevel(斜角)lineCap: 端点样式butt(默认值),round(圆角),square(高度多出线宽一半)canvas变换translate(x,y)坐标基准点偏移 : 从起始点为基准，移动到当前位置rotate(弧度): 旋转  弧度公式 ：角度*PI/180scale(wb,hb)缩放比例(缩放canvas绘制的图片)*/var ocan = document.getElementById('canvas');var oCanvas = ocan.getContext("2d");//那大canvas并2d渲染环境;oCanvas.fillStyle='#ff00ff';//设置填充颜色oCanvas.strokeStyle='#336666';//设置触笔方法的颜色oCanvas.lineWidth=5;//设置触笔宽度(线宽)/*绘制曲线*/for(var i=0;i<12;i++){oCanvas.save();oCanvas.translate(250,250);//将坐标基准点移动到画布中心oCanvas.rotate(30*i*Math.PI/180);//旋转绘制的角度oCanvas.moveTo(0,-160);oCanvas.lineTo(0,-190)oCanvas.stroke();//触笔方法//oCanvas.fill();//填充方法oCanvas.restore();}</script></body></html>

0 0