一.canvas的绘制功能

填充矩形的颜色：fillStyle属性。

填充矩形：fillRect方法。

绘制矩形边框的颜色：strokeStyle属性。

绘制矩形边框：strokeRect方法。

擦除矩形：clearRect方法。

二.源码

<!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>canvas的绘制功能</title><style>canvas{border: 1px solid black;}</style>
</head>
<body><button id="btn1">画一个矩形</button><button id="btn2">画一个矩形边框</button><button id="btn3">擦除画布内容</button><canvas width="500" height="400" id="myCanvas"></canvas>
</body>
</html>
<script>var btn1 = document.getElementById("btn1");var btn2 = document.getElementById("btn2");var btn3 = document.getElementById("btn3");//获取画布var canvas=document.getElementById("myCanvas");//获取2dvar ctx = canvas.getContext("2d");//填充矩形btn1.onclick =function(){//设置颜色ctx.fillStyle = 'green';//填充矩形ctx.fillRect(100,100,100,100); };//绘制矩形边框btn2.onclick =function(){//设置颜色ctx.strokeStyle = 'red';//绘制矩形边框ctx.strokeRect(250,100,100,100); };//擦除画布btn3.onclick = function(){ctx.clearRect(0,0,600,600);};
</script>

篇章

上一篇：canvas教程3-用面向对象思维来实现动画

下一篇：canvas教程5-绘制路径

canvas教程4-canvas的绘制功能相关推荐

canvas mdn_MDN文档 canvas教程笔记
MDN Canvas教程 API CanvasRenderingContext2D即canvas.getContext('2d')返回的对象类型,几乎所有作图操作基于这个"上下文对象&q ...
java canvas 画图片_[Java教程][HTML5] Canvas绘制简单图片
[Java教程][HTML5] Canvas绘制简单图片 0 2016-05-13 13:00:04 获取Image对象,new出来定义Image对象的src属性,参数:图片路径定义Image对象 ...
Canvas 教程：如何绘制带箭头的曲线
这篇文章要解决一个问题,就是给定 HTML 中任意一个点(起点)和另一个点(终点),绘制一条带箭头的曲线. 废话不多说,直奔主题. 我们只有两个点的相对偏移量(offset),思路就是以这两个点作为对 ...
canvas教程大纲
文章目录 canvas教程1-canvas的基本使用 canvas教程2-canvas的编程思想 canvas教程3-用面向对象思维来实现动画 canvas教程4-canvas的绘制功能 canvas ...
canvas教程5-绘制路径
文章目录一.绘制不规则图形的思路 1.需要设置路径起点 2.使用绘制命令画出路径 3.封闭路径 4.填充或者绘制已经封闭路径的形状二.源码三.图形解释篇章一.绘制不规则图形的思路绘制路径的 ...
html2canvas教程_HTML5 Canvas教程：简介
html2canvas教程 Interested in CSS animation? Check out Creating Animations with CSS, a complete course ...
java使用重绘实现拖动_原生JS使用Canvas实现拖拽式绘图功能
一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包含圆心坐标点和半径)等实体 2.原生JavaScript实现,不依赖任何第三方j ...
Fabricjs在Canvas上使用路径Path绘制不规则图形
场景 Fabricjs在Canvas上插入照片并设置缩小和翻转属性: Fabricjs在Canvas上插入照片并设置缩小和翻转属性_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的 ...
canvas 元素绑定事件_绘制SVG内容到Canvas的HTML5应用
SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术,两种绘制图形方式各有优缺点,但两者并非水火不容,尤其是SVG内容可直接绘制在Canvas上的功能,使得两者可以完美的融合在一起, ...

canvas教程4-canvas的绘制功能

文章目录

一.canvas的绘制功能

二.源码

篇章

canvas教程4-canvas的绘制功能相关推荐

最新文章

热门文章