html 代码
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title></title>
- <script>
- window.onload=function(){
- //1, 获取 canvas 元素
- var v_canvas=document.getElementById("canvas01");
- ////2, 获取上下文
- ////context 中封装了很多绘图功能的对象
- var context=v_canvas.getContext("2d");
- ////3, 绘图
- //// (1)矩形
- // context.fillStyle="#112233";
- // 绘制实心矩形(起始衡坐标; 起始纵坐标, 矩形宽度, 矩形高度)
- // context.fillRect(20,30,100,100);
- // 设置边款样式
- // context.strokeStyle="red";
- //// 设置线宽
- // context.lineWidth=5;
- //// 绘制边框
- // context.strokeRect(20,30,100,100);
- //// 擦除指定矩形区域的图形
- // context.clearRect(0,0,400,400);
- // document.onkeydown=function(e){
- // var e=e||window.event;
- // if(e.keyCode==39){
- // context.clearRect(20,30,100,100);
- // context.fillRect(30,30,100,100);
- //
- // }
- // }
- //(2 画圆
- // 开始创建路径
- context.beginPath();
- // 绘制圆
- //arc(圆心横坐标, 圆心纵坐标, 开始角度, 结束角度, 是否顺时针(true 是顺 flas 是逆))
- // context.arc(150,150,50,0,Math.PI*2,false);
- //// 关闭路径
- // context.closePath();
- // context.fillStyle="#990077";
- // context.fill();// 填充
- // context.stroke(150,150,50,0,Math.PI*2,false);
- // for(var i=0;i<20;i++){
- // context.beginPath();
- // context.arc(20*i,20*i,3*i,0,Math.PI*2,false);
- // context.closePath();
- // context.fillStyle="rgba(255,0,0,"+(0.05*i)+")";
- // context.fill();
- // }
- /*
- * (3)画线
- * moveto(起始点横坐标, 起始点纵坐标)
- * lineto(终点的横坐标, 终点的纵坐标)
- * */
- // context.moveTo(10,10);
- // context.lineTo(100,100);
- // context.strokeStyle="red";
- // context.lineWidth=5;
- // context.stroke();
- // 好看的线
- // var x;
- // var y;
- // var z =Math.PI/15*11;
- // context.beginPath();
- // context.moveTo(80,90);
- // for(var i=0;i<30;i++){
- // x=Math.sin(i*z);
- // y=Math.cos(i*z);
- // context.lineTo(150+x*100,150+y*100);
- // }
- // context.closePath();
- // context.strokeStyle="red";
- // context.lineWidth=1;
- // context.stroke();
- // var img=new Image();
- // img.src="img/wwwww.png";
- ////onload. 事件: 是同步执行绘制图片的函数
- ////context.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh);
- ///* 复制图形的某个位置区域到另一个位置
- //* sx,sy: 源图像被复制区域在话不中的起始横纵坐标
- //* sw,sh: 被复制区域的宽高
- //* dx,dy: 复制后的图像在画布中的起始横纵坐标
- //* dw,dh: 复制后的图像宽高
- //* */
- // img.onload=function(){
- //// context.drawImage(img,100,100);
- //// context.drawImage(img,100,100,100,200);
- // context.drawImage(img,20,20,50,80,100,0,100,100);
- // }
- // 绘制文字
- // context.fillStyle="red";
- // context.font="bolder 30px 黑体";
- // context.textBaseline="top";
- // context.fillText("今天星期一",100,100);
- // 空心文字
- // context.strokeStyle="red";
- // context.font="bolder 30px 黑体";
- // context.textBaseline="top";
- // context.strokeText("今天星期一",100,100);
- // 阴影
- // context.fillStyle="red";
- // context.font="bolder 30px 黑体";
- // context.textBaseline="top";
- // context.shadowOffsetX=10;// 阴影横向偏移量
- // context.shadowOffsetY=10;// 阴影纵向偏移量
- // context.shadowColor="black";// 阴影颜色
- // context.shadowBlur=10;// 阴影模糊度
- // context.fillText("今天星期一",100,200);
- // 渐变
- //1, 线性渐变
- //createLinearGradient(渐变起始点横坐标, 渐变起始点的纵坐标, 渐变结束点的横坐标, 渐变结束点的纵坐标)
- //addColorStop(距离起始点的偏移量 (0-1), 追加的颜色) 追加渐变颜色
- // var lg=context.createLinearGradient(0,20,500,300);
- // lg.addColorStop(0,"red");
- // lg.addColorStop(0.5,"blue");
- // lg.addColorStop(1,"green");
- // context.fillStyle=lg;
- // context.fillRect(0,0,500,500);
- // 渐变文字
- // var lg=context.createLinearGradient(100,300,300,300);
- // lg.addColorStop(0,"red");
- // lg.addColorStop(0.5,"blue");
- // lg.addColorStop(1,"green");
- // context.fillStyle=lg;
- // context.font="bolder 30px 黑体";
- // context.textBaseline="top";
- // context.shadowOffsetX=10;// 阴影横向偏移量
- // context.shadowOffsetY=10;// 阴影纵向偏移量
- // context.shadowColor="black";// 阴影颜色
- // context.shadowBlur=10;// 阴影模糊度
- // context.fillText("今天星期一",100,200);
- // 径向渐变
- // context.createRadialGradient(渐变开始的圆心横坐标, 渐变开始的圆心纵坐标, 开始圆的半径
- // 渐变结束的圆心横坐标, 渐变结束的圆心纵坐标, 结束圆的半径)
- // var lg=context.createRadialGradient(450,300,0,450,300,200);
- // lg.addColorStop(0,"white");
- // lg.addColorStop(0.2,"white");
- // lg.addColorStop(0.3,"red");
- // lg.addColorStop(0.5,"white");
- // context.fillStyle=lg;
- // context.fillRect(300,200,500,400);
- // lg.arc(150,150,50,0,Math.PI*2,false);
- // 图片变形
- /*
- * cintext.translate(x,y)平移
- * context.scale(x,y) 缩放
- * context.rotate(x)旋转
- * x-- 旋转角度
- * 正数: 顺时针旋转
- * 负数: 逆时针选装
- * */
- // context.translate(200,50);
- // context.fillStyle="rgba(255,0,0,0.5)";
- // for(var i=0;i<50;i++){
- // context.translate(25,25);
- // context.scale(0.95,0.95);
- // context.rotate(Math.PI/10);
- // context.fillRect(0,0,100,50);
- // }
- context.translate(300,50);
- for(var i=0;i<50;i++){
- context.translate(30,30);
- context.scale(0.95,0.95);
- context.rotate(Math.PI/10);
- var x,y;
- var z=Math.PI/10*12;
- context.beginPath();
- for(var j=0;j<5;j++){
- x=30*Math.sin(j*z);
- y=30*Math.cos(j*z);
- context.lineTo(x+150,y+150);
- }
- context.closePath();
- context.strokeStyle="red";
- context.lineWidth=2;
- context.stroke();
- }
- }
- </script>
- <style>
- #canvas01{
- border: 1px solid red;
- background-color: #e8e0ed;
- }
- </style>
- </head>
- <body>
- <canvas width="600px" height="400px" id="canvas01"></canvas>
- </body>
- </html>
来源: http://www.qdfuns.com/article/34533/8a4efc8d5d7304c701411cc534ed16e8.html