html5 canvas 水平渐变描边

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>渐变描边</title>
<script src="js/modernizr.js"></script>
</head>

<body>
<script type="text/javascript">
window.addEventListener(‘load‘,eventWindowLoaded,false);
function eventWindowLoaded(){
    canvasApp();
}
function canvasSupport(){
    return Modernizr.canvas;
}
function canvasApp(){
    if(!canvasSupport()){
        return;
    }else{
        var theCanvas = document.getElementById(‘canvas‘)
        var context = theCanvas.getContext("2d")

    }
    drawScreen();
    function drawScreen(){
        //水平渐变值必须保持为0
        var gr = context.createLinearGradient(0,0,100,0);
        //添加颜色端点
        gr.addColorStop(0,‘rgb(255,0,0)‘);
        gr.addColorStop(.5,‘rgb(0,255,0)‘);
        gr.addColorStop(1,‘rgb(0,0,255)‘);
        //应用fillStyle生成渐变
        context.strokeStyle = gr;
        context.strokeRect(0,0,100,100);
        context.strokeRect(0,100,50,100);
        context.strokeRect(0,200,200,100);

    }
}
</script>
<canvas id="canvas" width="500" height="500">
你的浏览器无法使用canvas
小白童鞋;你的支持是我最大的快乐!!
</canvas>
</body>
</html>
时间: 2024-10-07 21:50:41

html5 canvas 水平渐变描边的相关文章

html5 Canvas颜色渐变(画图很重要)

如果我们想要给图形上色,有两个重要的属性可以做到:fillStyle 和 strokeStyle.    fillStyle = color    strokeStyle = color strokeStyle 是用于设置图形轮廓的颜色,而 fillStyle 用于设置填充颜色.color 可以是表示 CSS 颜色值的字符串,渐变对象或者图案对象.默认情况下,线条和填充颜色都是黑色(CSS 颜色值 #000000). 下面的例子都表示同一种颜色.   // 这些 fillStyle 的值均为 '

html5 canvas 填充渐变形状

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

HTML5 Canvas ( 线性渐变, 升级版的星空 ) createLinearGradient, addColorStop

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas</title> <script type="text/javascript" src="../js/jQuery.js"></script> <style type="text/css">

html5 canvas 径向渐变2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

html5 canvas图片渐变

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script> window.onload = function () { var oc = document.getElementById('c1'); var ogc = oc.getContext('2d'); var yimg = new Imag

html5 canvas 奇怪的形状水平渐变(因为大多数的之前的文章把基础都打过了,所以开始写的快了,如果有不明白的,可以回顾下之前的)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

[转]html5 Canvas画图4:填充和渐变

一般绘图的方式有两种,即填充和描边,前面的文章已经讲了描边的方法stroke,本文就讲一下Canvas中填充图形的方法. 填充即fill(),很直白吧?而且和strokeStyle表示描边样式一样,fillStyle即表示填充样式. ctx.fillStyle = '颜色';默认的填充样式是不透明的黑色 提问:未闭合的路径可以填充吗? 可以.Canvas会从你当前路径的终点直接连接到起点,然后填充.如图: 但你可以发现,最后一段没有描边. 记得我们前一篇文章用4条线画了一个正方形,但canvas

html5 canvas 多个填充渐变形状

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

html5 canvas 奇怪的形状垂直渐变

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-