分类目录

链接

友情链接

统计信息

  • 日志总数:114篇
  • 评论总数:185条
  • 分类总数:11个
  • 标签总数:391个
  • 友情链接:0个
  • 网站运行:3177天

2019年八月
« 3月    
 1234
567891011
12131415161718
19202122232425
262728293031  
>
现在位置:    首页 > html5/css3 > 正文

html5 画图(画直线,圆,矩形,canvas)的一些实例

html5/css3 暂无评论
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5实例</title>

<script>

function newCanvas (){
    
    var canvas = document.createElement("canvas");
    canvas.id = "canvas";
    canvas.setAttribute("width","1000");
    canvas.setAttribute("height","500");
    document.body.appendChild(canvas);
    
}

//一朵绿色的菊花
function draw1(id) {
             var canvas = document.getElementById(id);
             if (canvas == null)
                 return false;
             var context = canvas.getContext("2d");
             //context.fillStyle = "#EEEEFF";
             //context.fillRect(0, 0, 400, 300);
             var n = 0;
             var dx = 500;
             var dy = 100;
             var s = 100;
             context.beginPath();
             context.fillStyle = 'rgb(100,255,100)';
             context.strokeStyle = 'rgb(0,0,100)';
             var x = Math.sin(0);
             var y = Math.cos(0);
             var dig = Math.PI / 15 * 11;
             for (var i = 0; i < 30; i++) {
                 var x = Math.sin(i * dig);
                 var y = Math.cos(i * dig);
                 context.lineTo(dx + x * s, dy + y * s);
             }
             context.closePath();
             context.fill();
             context.stroke();
 
         } 

window.onload = function(){
    newCanvas();
    var canvas = document.getElementById("canvas");
    var shape = canvas.getContext("2d");
    //实践表明在不设施fillStyle下的默认fillStyle=black
     shape.fillRect(0, 0, 100, 100);
     shape.strokeRect(120, 0, 100, 100);
      //设置纯色
     shape.fillStyle = "red";
     shape.strokeStyle = "blue";
     shape.fillRect(0, 120, 100, 100);
     shape.strokeRect(120, 50, 100, 100);
     
     //设置透明度实践证明透明度值>0,<1值越低,越透明,值>=1时为纯色,值<=0时为完全透明
     shape.fillStyle = "rgba(255,0,0,0.2)";
     shape.strokeStyle = "rgba(255,0,0,0.2)";
     shape.fillRect(240, 0, 100, 100);
     shape.strokeRect(240, 120, 100, 100);
     shape.clearRect(20, 20, 120, 120);
     
     //画圆     
     shape.beginPath();  //beginPath的作用在于画圆的时候  其实的path就是圆圈 也是下面stroke()方法所必须的
     shape.arc(200, 150, 80, 0, Math.PI * 2, true);
     //不关闭路径路径会一直保留下去,当然也可以利用这个特点做出意想不到的效果
     shape.closePath();
     shape.fillStyle = 'rgba(0,255,0,0.25)';
     //shape.strokeStyle = "rgba(255,0,0,0.2)";
     shape.fill();
     
     //画边框
     shape.stroke();
     
     //画直线
     shape.moveTo(300,100);
     shape.lineTo(350,300);
     shape.stroke();
     
     //画绿色的菊花
     draw1("canvas");
    }


</script>

</head>

<body>
</body>
</html>

以上是一些画图的实例  及我的注释  大家可以看一下,可能比较乱。但都是比较的简单  我就不说了 关于html5,还须努力学习。

本文版权归企业网站建设,做网站,网站建设,php网站建设,dedecms建站,ecshop二次开发,html空间,网站修改所有,转载引用请完整注明以下信息:
本文作者:admin
本文地址:html5 画图(画直线,圆,矩形,canvas)的一些实例 | 企业网站建设,做网站,网站建设,php网站建设,dedecms建站,ecshop二次开发,html空间,网站修改

抱歉!评论已关闭.