zoukankan      html  css  js  c++  java
  • [Canvas学习]基本用法

    简介

    <canvas>是一个可以使用JavaScript在其中绘制图形的HTML元素,可以用于制作照片集或者制作动画。

    Canvas默认大小是300px*150px,但是可以使用HTML的高度和宽度属性来自定义Canvas的尺寸。

    基本用法

    <canvas id="tutorial" width="150" height="150"></canvas>

    canvas需要使用结束标签,只有两个属性width,height。可以使用DOM的属性来进行设置,也可以使用CSS来定义大小。同时canvas也可以拥有margin, border, background等属性

    对于不支持canvas的浏览器,只需要在canvas标签中提供替换内容,这样支持canvas的浏览器就会忽略容器中包含的内容。而只是正常渲染canvas

    <canvas id="stockGraph" width="150" height="150">

      current stock price: $2.15+0.12

    </canvas>

    <canvas id="clock" width="150" height="150">

      <img src="images/clock.png" width="150" height="150" alt="clock">

    </canvas>

    渲染上下文

    canvas元素创造了一个固定大小的画布,公开了一个或多个渲染上下文,可以用来绘制和处理想要展示的内容。

    var  canvas = document.getElementById("tutorial");

    var  ctx = canvas.getContext("2d");

    兼容性写法

    var  canvas = document.getElementById("tutorial");

    if(canvas.getContext){

      var ctx = canvas.getContext("2d");

    }

    DEMO

    <html>

    <head>

      <meta charset="utf8" />

      <title>Canvas入门小实例</title>

    </head>

    <body>

      <canvas id='canvas' width="150" height="150"></canvas>

    </body>

    <script>

    var canvas = document.getElementById("canvas");

    if(canvas.getContext){

      var ctx = canvas.getContext("2d");

      ctx.fillStyle = "rgb(200,0,0)";

      ctx.fillRect(10,10,55,50);

      ctx.fillStyle = "rgba(0,0,200,0.5)";

      ctx.fillRect(30,30,55,50);

    }

    </script>

    </html>

  • 相关阅读:
    Hibernate session.save()实体类,主键增长问题
    安装原版 Windows 7 后需要安装的微软更新 和 必备系统组件
    如何使用站群程序来批量建网站?
    Android图片优化指南
    SQLite为何要用C语言来开发?
    Kotlin使用率达35%,Java要退位了?
    JavaScript的几种循环使用方式及性能解析
    30 分钟理解 CORB 是什么
    PHP 字符串相关常识
    那些10w+的公众号都在写什么?
  • 原文地址:https://www.cnblogs.com/joyjoe/p/6104123.html
Copyright © 2011-2022 走看看