canvas基本用法

左手的ㄟ右手 2021-07-24 20:57 557阅读 0赞

### 首先创建canvas元素 ###

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

width和height 也可以不指定，canvas会初始化宽度为300像素和高度为150像素

可以用CSS来指定这两个值，但如果css 尺寸与初始画布的比例不一致，它会出现扭曲，所以官方建议用js来设置 width和height这两个属性。

var canvas = document.getElementById('canvas');
    		canvas.width='300';
    		canvas.height='300';

注意：canvas.width='300'; 没有px哦，不然指定不成立。

### 获取上下文 ###

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

### 这个上下文就是绘画的基础，后面所有的动作都是要在这个上下文中操作。 ###

<body>
    	<canvas id='canvas' ></canvas>
    </body>
    
    <script type="text/javascript">
    		
    	window.onload=function(){
    		var canvas = document.getElementById('canvas');
    		canvas.width='300';
    		canvas.height='300';
    		var ctx = canvas.getContext('2d');
    		
    		//在x轴为10，y轴为10的位置画长为120，宽为80的长方形
    		ctx.strokeRect(10,10,120,80);
    		//在x轴为120，y轴为120的位置画长为160，宽为100的长方形
    		ctx.strokeRect(120,120,160,100);
    	}

### 上面代码得到的效果就是下图 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70]: /images/20210724/f361772f029047998229ea0ee391cbd6.png

发表评论取消回复

表情：

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

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

相关阅读

相关 git基本用法

一、git版本控制 svn、git 1.安装从官网上下载 https://git-scm.com/ 没有特殊要求的话，默认安装即可 2.配置用户信息

Myth丶恋晨/ 2022年12月02日 01:05/ 0 赞/ 232 阅读

相关 Canvas学习笔记——Canvas基础用法

Canvas是HTML5中的新增API，提供了一个通过Javascript和HTML的`<canvas>`元素来绘制图形。Canvas API主要聚焦于2D图形。`<canva

系统管理员/ 2022年09月04日 10:56/ 0 赞/ 289 阅读

相关 Android绘图Canvas、Paint类基本用法

这些用法都是英文的字面意思，所以解释部分就放在代码的注释那里了，要画图，就要继承View类重写onDraw方法，要注意的是构造方法也重写一下吧，话不多说直接上代码~~~

末蓝、/ 2022年08月03日 08:40/ 0 赞/ 245 阅读

相关 Canvas用法

首先说一下canvas类： Class Overview The Canvas class holds the "draw" calls. To draw

叁歲伎倆/ 2022年06月13日 07:26/ 0 赞/ 239 阅读

相关 canvas基本用法

> canvas是一个强大的绘图及制作动画和游戏手段，下面介绍canvas利用js的API实现基本画图功能。划线： <!DOCTYPE html> <ht

短命女/ 2022年03月18日 03:18/ 0 赞/ 353 阅读

相关 Canvas的基本用法

> 代码地址如下： > [http://www.demodashi.com/demo/14723.html][http_www.demodashi.com_demo_147

旧城等待，/ 2022年03月10日 12:58/ 0 赞/ 304 阅读

相关 ajax基本用法

注：[https://www.cnblogs.com/hi-feng/p/7873352.html][https_www.cnblogs.com_hi-feng_p_78733

怼烎@/ 2021年09月28日 19:28/ 0 赞/ 538 阅读

相关 axios基本用法

一.axios 1.什么是axios axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。简单的理解就是ajax的封装它本身具有

╰+哭是因爲堅強的太久メ/ 2021年09月15日 02:54/ 0 赞/ 533 阅读

相关 canvas基本用法

首先创建canvas元素 <canvas id="canvas" width="150" height="150"></canvas> width和height

左手的ㄟ右手/ 2021年07月24日 20:57/ 0 赞/ 558 阅读

相关 CompletableFuture基本用法

[https://www.cnblogs.com/cjsblog/p/9267163.html][https_www.cnblogs.com_cjsblog_p_9267163

骑猪看日落/ 2021年06月11日 15:13/ 0 赞/ 729 阅读