canvas（一）从零开始

wangbjun 发布于2019-08-23 12:11 / 3373人阅读

摘要：前言是一个标签，提供使用脚本绘制图形图像的最早由引入，现兼容的常规浏览器，目前可以使用个元素来绘制图形。

前言

canvas是一个HTML5标签，提供使用脚本绘制图形图像的api；最早由Apple引入WebKit，现兼容ie9+的常规浏览器，目前可以使用个

开始准备

在常规的html页面中插入html标签容器

标签属性可以设置宽和高（默认300*150）

由于我们需要是用脚本绘制，要获取元素，可以设置id（当然其他途径获取dom亦可）

至此我们可以看到浏览器渲染出一个100*100的盒子容器（没有颜色，你可以使用浏览器看盒子模型）；

脚本获取上下文 getContext

canvas提供api来自哪里，获取渲染canvas的上下文，就是获取到一个对象，挂载含有提供api的对象，我们需要用这个对象提供api来绘制。

canvas兼容处理

标签兼容：

不支持canvas的浏览器会把标签忽略为自定义标签，显示里面的内容

api兼容

有些兼容不好的api 需要根据按需求来判断兼容并处理

    //  不支持api 该给用设置户友好提示了
    if(!ctx.getContext) return;

填充方形和 fillStyle、fillRect

    ctx.fillStyle = "red";
    ctx.fillRect(10,10,50,50);

解读

上面我们获取到了canvas上下文，拿到对象可以对对象操作，以上两个属性和方法就是小栗子；

fillStyle

属性值默认 #000 ,是一个string字符串，用于设置接下来绘制的颜色，可以设置为颜色的对象、rgb、rgba等；

fillRect

方法接收四个参数，分别是x、y、width、height；x、y是绘制图形的起点（左上角x，左上角y）

做点啥? 简单的例子 笑果如下：

源代码地址：点击查看

还可以慢慢做点别有趣的小动画如下：

点击查看代码：点击查看

拓展绘制矩形边框 rect

    ctx.strokeStyle="blue";
    ctx.rect(10,10,70,70);
    ctx.stroke();

绘制矩形区域 strokeRect

    ctx.strokeStyle = "blue";
    ctx.strokeRect(1,1,90,90);

清除矩形区域

    ctx.clearRect(40,40,10,10)

以上参数原理都一样，从命名理解：
fill... 填充
stroke... 绘制
clear... 清除

云服务器 GPU服务器从零开始 linux从零开始 python从零开始从零开始php

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98083.html

canvas（一）从零开始

摘要：前言是一个标签，提供使用脚本绘制图形图像的最早由引入，现兼容的常规浏览器，目前可以使用个元素来绘制图形。前言 canvas是一个HTML5标签，提供使用脚本绘制图形图像的api；最早由Apple引入WebKit，现兼容ie9+的常规浏览器，目前可以使用个元素来绘制2d图形。开始准备在常规的html页面中插入html标签容器标签属性可以设置宽和高（默认300*150） ...

feng409 2019-08-02 11:37 评论0 收藏0
【30分钟学完】canvas动画|游戏基础(2)：从零开始画画

摘要：前言上篇主要是理论的概述，本篇会多些实践，来讲讲的基础用法，并包含一些基础三角函数的应用，推荐没有基础的朋友阅读，熟悉的朋友可以跳过。完整实例一个会跟踪鼠标位置的箭头三角函数上下运动终于顺利过渡到三角函数的话题笑。前言上篇主要是理论的概述，本篇会多些实践，来讲讲canvas的基础用法，并包含一些基础三角函数的应用，推荐没有canvas基础的朋友阅读，熟悉的朋友可以跳过。本人能力...

anyway 2019-08-02 16:01 评论0 收藏0
【30分钟学完】canvas动画|游戏基础(2)：从零开始画画

摘要：前言上篇主要是理论的概述，本篇会多些实践，来讲讲的基础用法，并包含一些基础三角函数的应用，推荐没有基础的朋友阅读，熟悉的朋友可以跳过。完整实例一个会跟踪鼠标位置的箭头三角函数上下运动终于顺利过渡到三角函数的话题笑。前言上篇主要是理论的概述，本篇会多些实践，来讲讲canvas的基础用法，并包含一些基础三角函数的应用，推荐没有canvas基础的朋友阅读，熟悉的朋友可以跳过。本人能力...

Baoyuan 2019-08-22 15:42 评论0 收藏0