你的位置:首页 > 软件开发 > 网页设计 > canvas 基础

canvas 基础

发布时间:2016-10-21 21:00:08
最近老跟canvas打交道,处理图片:放大缩小,图片旋转,移动图片等等!重新温故下canvas的基础用法!<!DOCTYPE html><html "http://www.w3.org/1999/xhtml"><head>& ...

最近老跟canvas打交道,处理图片:放大缩小,图片旋转,移动图片等等!

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

<!DOCTYPE html><html "http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  <title></title>  <script type="text/javascript">    window.onload = function () {      var canvas = document.getElementById("myCanvas");      var context = canvas.getContext("2d");      //绘制矩形并填充      //前两个参数是正方形原点(左上角)的(x,y)坐标值,      //其余的两个参数是矩形的宽和高,宽是矩形向右绘制的距离,高是矩形向下绘制的距离      //context.fillRect(x, y, width, height);      context.fillStyle = "rgb(255,0,0)"; //rgb(红,绿,蓝);  设置填充颜色      context.fillRect(200, 300, 200, 100);      //绘制矩形相框      context.lineWidth = 5; //加粗绘制线条  默认值为1      context.strokeStyle = "blue";  //设置线条颜色      context.strokeRect(40, 40, 200, 100);      //绘制线条      context.beginPath(); //开始路径      context.moveTo(40, 40);//设置路径原点      context.lineTo(340, 340);//设置路径终点      context.closePath(); //结束路径      context.strokeStyle = "#00ff00";      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(); //填充路径      //角度转换弧度      var degree = 1; //1度      var radians = degree * (Math.PI / 180); //0.0175弧度      //绘制文本      var txt = "Hello World!";      context.font = "italic 30px serif"; //修改字号和字体 默认值:10px sans-serif  该值可接收与css的font完全相同的字符串      //第一个参数:准备绘制的文本,第二三个参数:文本原点(左下角)的(x,y)针坐标      context.fillText(txt, 20, 90);      context.lineWidth = 1;      context.font = "italic 60px serif";      context.strokeText(txt, 20, 190); //创建描边文本      //擦除Canvas      setTimeout(function () {          context.clearRect(0, 0, 500, 500);      }, 10000);      //如果重新设置Canvas的宽和高,Canvas会恢复到初始状态。也就等于擦除了Canvas    }  </script></head><body>  <canvas id="myCanvas" width="500" height="500">  </canvas></body></html>

原标题:canvas 基础

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录