通过画图自动生成html代码,如何使用HTML canvas来画图

ゝ一纸荒年。 2022-10-05 12:46 578阅读 0赞

将canvas添加到HTML中

标签自身只有两个属性: width, height. 二者在没有指定的时候(标签内指定或者CSS指定)分别默认为300 pixels和150 pixels.

当然除此之外，canvas还有一个HTML的全局属性——id属性.

page\_name

浏览器不支持canvas

书写canvas标签还有一点切记：canvas的结束标签不可以省略！

canvas的支持性

并不是每个浏览器都支持canvas标签，除了要检查浏览器的支持性外，还要设置好在不支持情况下canvas标签的替换内容(用以提示用户信息或者干脆建议用户将浏览器升级到最新版本)

![Image 1][]

下面是如何通过Javascript来检测浏览器是否支持canvas标签.

if(canvas.getContext)\{

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

//continue drawing

\}else\{

//canvas-unsupported code here

\}

最后的准备工作

准备工作到这里还没有结束，还必须使用 getContext(contextId) 来获取canvas标签的渲染上下文，通过这个上下文方可以调用各种绘画函数.我们不妨将渲染上下文想象成一个画笔，只有获得画笔我们才能进行绘画.

这里的contextId有两种取值："2d"和"experimental-webgl". 平时我暂且使用前者就好了，它会返回一个CanvasRenderingContext2D对象.

var canvas = document.getElementById('mycanvas');

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

开始绘画

canvas就是一个画布，标签的大小就是画布的大小。我们通过坐标来定位并在这张画布上绘画。绘画之前canvas是空的，画布以左上角为原点(0,0)，向右和向下为正方向。

![1b2212979561496fea431b5be2445324.png][]

绘画之前，先蘸取画笔的颜色.

//蘸取画刷颜色

context.fillStyle = "\#ffffaa";

然后便可以进行绘画.

最简单的绘画从画文本开始，没错，我们把文字的当做最简单的图形.

//设置字体

context.font = "20px Sans-Serif";

//画一个文本

context.fillText("Hello World!", 195, 190);

在canvas中只有一种图形我们可以直接通过调用函数就可以绘画出来，那就是矩形。这也就意味着，其余所有的图形，我们都需要通过绘制路径来拼成我们想要的图形，诸如三角形、梯形等等.

fillRect(x, y, width, height)  绘画实心矩形

strokeRect(x, y, width, height)  绘画空心矩形

clearRect(x, y, width, height)  擦除矩形范围内的所有的像素点

//画一个矩形

context.fillRect(0, 0, 500, 300);

//画一个文本

context.fillText("Hello World!", 195, 190);

//设置字体

context.font = "20px Sans-Serif";

//设置字体的垂直对齐方式

context.textBaseline = "top";

控制台输出信息

console.log(message);

[Image 1]: 
[1b2212979561496fea431b5be2445324.png]: /images/20221005/445ff189751b41bbbc992e1dfe9aa85e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，578人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp 使用canvas 画图连线

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4

喜欢ヅ旅行/ 2023年02月20日 02:39/ 0 赞/ 118 阅读

相关 html用画布画图,HTML5入门十---Canvas画布实现画图（一）

\}.ToolBar\{float:left;font-family:"微软雅黑";font-size:14px;font-variant:small-caps;text-al

水深无声/ 2022年10月10日 15:45/ 0 赞/ 296 阅读

相关 uniapp实现canvas画图

画布画图片和文字 //页面组件 <canvas style="width:206px;height:180px;" id="canvas" canvas-id

向右看齐/ 2022年10月07日 11:44/ 0 赞/ 979 阅读

相关通过画图自动生成html代码,如何使用HTML canvas来画图

将canvas添加到HTML中标签自身只有两个属性: width, height. 二者在没有指定的时候(标签内指定或者CSS指定)分别默认为300 pixels和150

ゝ一纸荒年。/ 2022年10月05日 12:46/ 0 赞/ 579 阅读

相关 HTML5中canvas画图之绘制数据图表

上一篇博文绘制了一个方格图，现在来绘制一个数据图表。实现的效果如下: ![Center][] 实现代码如下: <!DOCTYPE html> <ht

悠悠/ 2022年08月23日 08:10/ 0 赞/ 323 阅读

相关 HTML5中canvas画图之绘制方格图

下一篇博文是准备绘制折线数据图的，这个绘制方格图是为绘制折线图做准备。方格将作为折线图的基准线。绘制方格图的逻辑很简单，只要在canvas上绘制一系列的横线和竖线即可。下面是具

港控/mmm°/ 2022年08月23日 05:58/ 0 赞/ 427 阅读

相关 HTML5中canvas画图之画圆形

利用canvas中的arc可以绘制圆形图案。函数原型为:context.arc(x,y,半径，开始角度，结束角度，是否逆时针旋转);所以可以通过修改开始角度和结束角度来绘制弧线

桃扇骨/ 2022年08月23日 05:51/ 0 赞/ 275 阅读

相关 HTML5中canvas画图之绘制路径

刚开始认真学习H5，虽然以前大概看过H5的教程，但是都是属于空看，一直没有认真练习，所以打算从现在开始来认真练习。下面的代码实现的功能是绘制一个三角形。代码比较简单。

待我称王封你为后i/ 2022年08月23日 05:49/ 0 赞/ 271 阅读

相关 canvas画图

<1>canvas画半圆 html: <canvas id="xxb" width="200" height="200"></canvas> js:

悠悠/ 2022年05月14日 07:09/ 0 赞/ 384 阅读

相关使用canvas画图，图形模糊怎么办

在说解决办法之前，例行惯例，简要的说明一下Html5中的Canvas。Canvas是Html5制图中常用的元素，但其本身并没有绘制能力，它仅仅是图形的容器，要制图还必须依靠脚本

红太狼/ 2021年09月17日 02:20/ 0 赞/ 673 阅读