HTML5中fillStyle和fillRect的先后顺序的理解

fill:填充的意思

stroke:笔的意思，可理解为为strokeRect是画框框的

fillStyle要写在fillRect之前，可以理解为，先选好颜色再画图（就像画画要先选好画笔颜色才能开始画图），否则，先进行图形绘制，此时的颜色已经定下来，再去设置它的颜色就没有意义了，这是我的理解。

function draw(id) {var canvas = document.getElementById(id);var context = canvas.getContext('2d');context.strokeStyle='green';context.strokeRect(0,0,800,300);context.fillStyle='black';context.font="lighter 40px '微软雅黑'";context.fillText('麦子学院',50,50);context.strokeText('麦子学院',50,100);}

HTML5中fillStyle和fillRect的先后顺序的理解相关推荐

[html] 说说你对HTML5中“一次编写，全体使用”的理解
[html] 说说你对HTML5中"一次编写,全体使用"的理解这个有点组件化的意思? 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起 ...
HTML5 中的canvas元素用于,HTML5中的Canvas元素
canvas 元素用于在网页上绘制图形. 什么是Canvas? HTML 5 的canvas元素使用JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas ...
html5中提供的绘图元素,HTML5中Canvas元素的使用总结
HTML5中Canvas元素的使用总结 Canvas提供了开发者自定义绘图的接口,我们可以公国getContext()函数来获取绘图上下文进行绘制操作,这个函数中可以传入两个参数,其中第1个参数设置绘 ...
html 绘制矩形,HTML5中使用canvas绘制矩形
canvas是HTML5中新增的一个元素,使用Canvas可以绘制任何你喜欢的图形.先来认识什么是Canvas? 1.在页面上放置一个canvas元素,就相当于在页面上放置了一块"画布&qu ...
html5中canvas画布实现手机端和移动端的刮刮乐效果
用html5中的canvas实现刮刮乐的效果使用html+css实现背景的样式使用clearRect()方法实现挂去的作用手机端使用addEventListener()监听手机端滑动事件tou ...
html5中阴影,HTML5 Canvas 中的颜色、样式和阴影的属性和方法
颜色.样式和阴影的属性与方法 fillStyle 设置或返回用于填充绘画的颜色.渐变或模式 strokeStyle 设置或返回用于笔触的颜色.渐变或模式 ...
HTML5中关于wheel事件兼容性处理
2019独角兽企业重金招聘Python工程师标准>>> 在html5中存在,滚轮滚动事件判断需要使用 wheel的时间,但各大版本浏览器使用的方式差异性却非常大,总体来说,目前whe ...
php video标签使用方法,HTML_HTML5 video标签（播放器）学习笔记（一）:使用入门，近有在学习html5中video标签（播 - phpStudy...
HTML5 video标签(播放器)学习笔记(一):使用入门近有在学习html5中video标签(播放器)的使用,这里做一些学习笔记,方便自己查阅和记录,本文是第一篇,将介绍的是使用该标签初始化该做 ...
HTML5中常用的标签(及标签的属性和作用)
1.标签:<!DOCTYPE> 作用:声明是文档中的第一成分,位于<html>标签之前. 2.标签:<html> 作用:此元素可告知浏览器其自身是一个HTML文档. ...
（二）html5中的属性
1.全局属性所谓全局属性,是指可以对任何元素都使用的属性: (1)contentEditable属性 contentEditable属性的主要功能是允许用户编辑元素中的内容,所以该元素必须是可以获得 ...

HTML5中fillStyle和fillRect的先后顺序的理解

HTML5中fillStyle和fillRect的先后顺序的理解相关推荐

最新文章

热门文章