Canvas(1)之HelloWorld

最新推荐文章于 2022-08-27 22:38:07 发布

快乐的小小编

最新推荐文章于 2022-08-27 22:38:07 发布

阅读量504

点赞数

分类专栏： html5 文章标签： html5 canvas

本文链接：https://blog.csdn.net/xiaobianjava/article/details/48711319

版权

html5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

/*
    1.要使用canvas必须先设置其width和height属性
    2.接着获取绘制上下文，并指定能力，为2D还是3D
    3.绘制方式有填充和描边两种方式，即
      fillStyle 填充属性      fillRect()
      strokeStyle  描边属性    strokeRect()
      
   */
  var drawing = document.getElementById('drawing');
  if(drawing.getContext){
    //获取绘图的上下文
    var context  = drawing.getContext('2d');

    //绘制红色矩形
    context.fillStyle = '#ff0000';
    context.fillRect(10,10,50,50);

    //绘制半透明的矩形
    context.fillStyle = 'rgba(0,0,255,0.5)';
    context.fillRect(30,30,50,50);


    //在两个矩形重叠的地方清除一个小矩形, 即使这块矩形变成透明
    context.clearRect(40,40,10,10);


    //获取图像的数据URI,参数为图像的MIME类型，默认为png格式
    var imgURI = drawing.toDataURL('imge/png');

    //显示对象
    var image = document.createElement('img');
    image.src = imgURI;
    document.body.appendChild(image);
  }