美文网首页
一、Hello Canvas

一、Hello Canvas

作者: 我很惊讶 | 来源:发表于2021-06-08 10:23 被阅读0次

本篇将完成一个通用的canvas试验demo

完整代码

demo.html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Canvas</title>
    <style>
        body{
            background: #ddd;
        }
        #canvas{
            margin: 10px;
            padding: 10px;
            background: #fff;
            border: thin inset #aaaaaa;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="600" height="300">
        Canvas not supported
    </canvas>
</body>
<script src="example.js"></script>
</html>

example.js

var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d');
// 字体与大小
context.font = '38pt Arial';
// 填充样式 语法 color|gradient|pattern   颜色|渐变对象|pattern对象
context.fillStyle = "red"
// 笔触的颜色、渐变或模式
context.strokeStyle = 'blue';
// 绘制填充文字
context.fillText('Hello Canvas',canvas.width/2 - 150,canvas.height/2 + 15);
// 绘制文字
context.strokeText('Hello Canvas',canvas.width/2 - 150,canvas.height/2 + 15);
解析

1、对html来说,必须定义一个<canvas>标签来盛放画布编辑区域。值得注意的是,canvas的宽高最好如代码所示,直接在标签中定义,而不是写在css中,虽然很多情况下这两种写法的效果是一样的。但是写在css中实际改变的不是画布绘制区域,而是盒子区域,画布绘制区域跟随盒子进行了拉伸,所以在某些情况下可能出现效果变形。
标签中的 Canvas not supported 是只有浏览器不支持的情况下才会显示
2、

var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d');

这一部分代码定义了绘制环境。canvas仅仅是作为绘画对象的容器存在的,儿环境则提供了全部的绘画方法。也就是上面代码中的context,它就是一个2d绘图环境
canvas.getContext()这个方法返回的是一个CanvasRenderingContext2D对象,而2d也是目前唯一的合法值。3d绘图方式则需要研究webGL技术。
下面是CanvasRenderingContext2D对象方法和属性的参考链接
HTML Canvas 参考手册 (w3school.com.cn)

完成

完成效果

下一章会学习绘制一个时钟,来进一步熟悉canvas基础操作
另,本笔记所有演示都在chrome浏览器上展示

相关文章

  • 一、Hello Canvas

    本篇将完成一个通用的canvas试验demo 完整代码 demo.html部分 example.js 解析 1、对...

  • HTML5 Canvas笔记——打印出Hello Canvas

    参考书目:《HTML5 Canvas核心技术 图形、动画与游戏开发》 HTML5 Canvas简单入门操作,如同每...

  • android随笔之自定义View的Canvas用法

    对Canvas进行操作: 1,Canvas平移 2,Canvas缩放 3,Canvas旋转 Canvas操作例子 ...

  • HTML5 Canvas

    一、添加一个 Canvas 1.布置画布:通过添加标签,添加canvas元素 Canvas在HTM...

  • Canvas

    一、初识canvas canvas画布默认宽高是 300 * 150 px canvas宽高要使用canvas标签...

  • HTML5中canvas使用

    1、Canvas基础 2、Canvas画直线 3、Canvas画矩形 4、Canvas画文字 5、Canvas画圆...

  • 【微信小程序】canvas is empty

    问题:使用canvas时,报错:canvas is empty原因:因为创建canvas对象时,canvas还未加...

  • canvas

    @(HTML5)[canvas与SVG] [TOC] 十 、canvas canvas的基本用法 canvas是H...

  • canvas

    canvas canvas绘制 获取元素var canvas = document.getelementbyid(...

  • 2D学习之Bitmap

    Canvas canvas =new Canvas(); Paint paint =new Paint(); ca...

网友评论

      本文标题:一、Hello Canvas

      本文链接:https://www.haomeiwen.com/subject/hpedeltx.html