Html游戏开发-画图

浏览数：44 / 时间：2015年06月09日

1. 画矩形和写字

var canvas = document.getElementById(‘canvas‘),
    context = canvas.getContext(‘2d‘);

context.lineWidth = 30;

context.font = ‘24px Helvetica‘;
context.fillText(‘Click anywhere to erase‘, 175, 40);

context.strokeRect(75, 100, 200, 200);
context.fillRect(325, 100, 200, 200);

// 鼠标按下时清除整个画布
context.canvas.onmousedown = function (e) {
   context.clearRect(0, 0, canvas.width, canvas.height);
};


2. 射线渐变

var canvas = document.getElementById(‘canvas‘),
    context = canvas.getContext(‘2d‘),
    gradient = context.createRadialGradient(
                 canvas.width/2, canvas.height, 10,
                 canvas.width/2, 0, 100);

gradient.addColorStop(0, ‘blue‘);
gradient.addColorStop(0.25, ‘white‘);
gradient.addColorStop(0.5, ‘purple‘);
gradient.addColorStop(0.75, ‘red‘);
gradient.addColorStop(1, ‘yellow‘);

context.fillStyle = gradient;
context.rect(0, 0, canvas.width, canvas.height);
context.fill();

 

Html游戏开发-画图,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style html src com log http itblog class style html src com log http itblog

相关文章

随机文章

您可能还喜欢

您可能还喜欢