canvas 基础 - LI小白_H5之家 - 中国HTML5教程资源分享第一站

最近老跟canvas打交道，处理图片：放大缩小，图片旋转，移动图片等等！

重新温故下canvas的基础用法！

<!DOCTYPE html> <html xmlns=> <head> <meta http-equiv=content=/> <title></title> <script type=> window.onload = function () { ); ); //绘制矩形并填充 //前两个参数是正方形原点（左上角）的（x,y）坐标值， //其余的两个参数是矩形的宽和高，宽是矩形向右绘制的距离，高是矩形向下绘制的距离 //context.fillRect(x, y, width, height); context.fillStyle = ; //rgb(红，绿，蓝); 设置填充颜色 context.fillRect(200, 300, 200, 100); //绘制矩形相框 context.lineWidth = 5; //加粗绘制线条默认值为1 context.strokeStyle = ; //设置线条颜色 context.strokeRect(40, 40, 200, 100); //绘制线条 context.beginPath(); //开始路径 context.moveTo(40, 40);//设置路径原点 context.lineTo(340, 340);//设置路径终点 context.closePath(); //结束路径 context.strokeStyle = ; context.stroke(); //绘出路径轮廓 //绘制圆形 context.beginPath(); //开始路径 //前两个参数是圆点的坐标值；第三个是半径；第四个是开始角度；第五个是结束角度； //第六个是一个布尔值，为true时：按逆时值方向绘制；为false时：按顺时针方向绘制。 //Canvas中的角度是以弧度为单位的，而非角度。 //context.arc(x, y, radius, startAngle, endAngle, anticlockwise); context.arc(230, 90, 50, 0, Math.PI * 2, false); //绘制一个圆形 context.closePath(); //结束路径 context.fill(); //填充路径 degree = radians = degree * (Math.PI / 180); //0.0175弧度 txt = ; context.font = ; //修改字号和字体默认值：10px sans-serif 该值可接收与css的font完全相同的字符串 //第一个参数：准备绘制的文本，第二三个参数：文本原点（左下角）的（x,y）针坐标 context.fillText(txt, 20, 90); context.lineWidth = 1; context.font = ; context.strokeText(txt, 20, 190); //创建描边文本 //擦除Canvas setTimeout(function () { context.clearRect(0, 0, 500, 500); }, 10000); //如果重新设置Canvas的宽和高，Canvas会恢复到初始状态。也就等于擦除了Canvas } </script> </head> <body> <canvas id=width=height=> </canvas> </body> </html>

交流群：225443677