HTML5的画布:Stroke(笔触)和Fill(填充)

每当一个HTML5画布上绘制形状,有两个属性,你需要设置:

1、Stroke

2、Fill

笔触和填充决定的形状如何绘制。Stroke(笔触)是一个形状的轮廓。Fill(填充)是在形状内部的内容。

下面这图是绘制了一个蓝色外轮廓和绿色填充的矩形(实际上是两个矩形):

下面试实现的代码:

<span style="font-size:14px;">// 1. wait for the page to be fully loaded.
window.onload = function() {
    drawExamples();
}

function drawExamples(){

    // 2. Obtain a reference to the canvas element.
    var canvas  = document.getElementById("ex1");

    // 3. Obtain a 2D context from the canvas element.
    var context = canvas.getContext("2d");

    // 4. Draw grahpics.
    context.fillStyle = "#009900";
    context.fillRect(10,10, 100,100);

    context.strokeStyle = "#0000ff";
    context.lineWidth   = 5;
    context.strokeRect(10,10, 100,100);
}</span>

请注意的笔触样式和填充样式是分开设置,使用strokeStyle 和fillStyle的2D背景的性质。

还得注意这lineWidth属性,这里设置了一个线宽为5,最后,注意在2D背景下是如何指示或者画一个矩形填充或者是矩形轮廓。

时间: 2024-10-05 21:53:46

HTML5的画布:Stroke(笔触)和Fill(填充)的相关文章

HTML5的画布:Paths

HTML5的画布路径是一系列的点与点之间的绘图指令.例如,一系列的点用线在它们之间,或者与它们之间的电弧. 路径用来绘制多种类型的形状(线,圆,多边形等)的HTML5画布上的,所以要理解这个核心概念是很重要的. 开始和关闭路径 路径开始和结束时使用的2D上下文函数调用beginPath()和closePath() ,就像这样: var canvas = document.getElementById("ex1"); var context = canvas.getContext(&qu

在HTML5的画布元素上进行绘画操作

#!usr/bin/env python #-*- coding:utf-8 -*- #在HTML5的画布元素上进行绘画操作 import unittest,time from selenium import webdriver class TestDemo(unittest.TestCase): def setUp(self): self.driver = webdriver.Chrome() def test_HTML5Canvas(self): url = 'http://www.w3sc

入门讲解HTML5的画布功能(1)

个人认为在HTML5中画布功能其实并不实用,当然趋势是在FLASH不没落的情况下.通过学习我发现画布功能能够实现的东西非常有情调,但是前端人员也要有一定的审美和构思才能做出有意思的东西,因为canvas能提供的东西实在太少了. 当然在苹果抵制Flash的前提下,Flash的前景并不光明,这也给了我们前端人员更多的负担和机会.因为在这一块UI是没有我们对于HTML5来的熟悉的.下面就是我对HTML5学习过后的一个总结. first part 首先,虽然口口声声是HTML5的内容,但是由于canva

[Swift通天遁地]六、智能布局-(5)给视图添加Align(对齐)和Fill(填充的约束以及Label的约束

本文将演示如何给视图添加Align(对齐)和Fill(填充的约束以及Label的约束. 锚点默认位于视图中心点的位置. 首先确保在项目中已经安装了所需的第三方库. 点击[Podfile],查看安装配置文件. 1 platform :ios, ‘12.0’ 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'Neon' 7 end 根据配置文件中的相关配

跟KingDZ学HTML5之三 画布Canvas

继续更新我们的教程,哈哈,个人觉得 ,这个HTML5 的官方 LOGO  怎么看,怎么像变形金刚. 神马关系~~~~~~~~~~~ <Canvas> 是HTML5中新出现的一个元素.就是可以通过  JS绘制图形. 目前浏览器对 Canvas 的支持情况如下 IE FF Chrome Safari Opera IPhone Android 版本7.0以上 版本3.0以上 版本3.0以上 版本3.0以上 版本10.0以上 版本1.0以上 版本1.0以上 IE7 和  IE8  需要一个 第三方的

入门讲解HTML5的画布功能(2)

前面我们提到了JS代码中绘制的红色长方形,那么我们现在用这些代码再来看看具体是表示什么意思.代码如下 <script type="text/javascript"> var Canvas=document.getElementById("myCanvas"); varContext=c.getContext("2d"); Context.fillStyle="#FF0000"; Context.fillRect(0

[CareerCup] 9.7 Paint Fill 填充

9.7 Implement the "paint fill" function that one might see on many image editing programs. That is, given a screen (represented by a two-dimensional array of colors), a point, and a new color, fill in the surrounding area until the color changes

HTML5 Canvas 画布

一.Canvas是什么? canvas,是一个画布,canvas元素用于在网页上绘制图形. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 二.创建Canvas元素 加上基本的属性:类,宽度和高度 <canvas class="MyCanvas" width:100px height:100px></canvas> 三.绘制路径 使用的是javascript元素来绘制,canvas本省不具备绘图的能力.所有的绘制必须通过javascript

HTML5 canvas画布元素 制作 动态花朵动画

废话不多说 先上代码 <!doctype> <html> <head> <meta charset="utf-8"> </head> <body style="text-align:center;"> <canvas id="canvas" width="1300px" height="580px" style="bor